当前位置: 动力学知识库 > 问答 > 编程问答 >

Bottom bar position in tab UI - Polymer

问题描述:

I am using Scrollable paper-tabs - Polymer. I have placed a NEXT button above the tabs and I want to change the position of the selected bar(bar which is displayed on bottom of the selected tab ) on next button's click. I am new to Ploymer. Any help will be appreciated.

https://www.polymer-project.org/0.5/components/paper-tabs/demo.html

网友答案:

in order to change the position of the selected bar you can change the paper-tabs's index selection. It's better to use tabs.selectIndex(); function than selectNext(); in order to make the change cyclic : meaning once you've reached the end, it will select the first element and so on, if you provide the right index.

Here's the javascript function to do that :

    function clickAction(e) {
      var t = e.target;
      if (t.localName === 'paper-icon-button') {
         if (!t.hasAttribute('disabled')) {
            var tabs = document.querySelector('paper-tabs');
            var index = tabs.selectedIndex;
            index = index+1 == tabs.children.length ? 0 : index + 1;
            tabs.selectIndex(index);
         }
      }
    }

If you need a working sample, here's the one I've been working one (it's from Polymer's official documentation with a bit more) :

<!doctype html>
<html>
<head>
  <title>paper-tabs</title>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

  <script src="webcomponentsjs/webcomponents.js"></script>

  <link rel="import" href="core-icons/core-icons.html">
  <link rel="import" href="font-roboto/roboto.html">
  <link rel="import" href="paper-tabs/paper-tabs.html">
  <link rel="import" href="core-toolbar/core-toolbar.html">
  <link rel="import" href="core-media-query/core-media-query.html">
  <link rel="import" href="paper-icon-button/paper-icon-button.html">

  <style shim-shadowdom>
    body {
      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
      margin: 0;
      padding: 24px;
      color: #333;
    }

    body.core-narrow {
      padding: 8px;
    }

    paper-tabs, core-toolbar {
      background-color: #00bcd4;
      color: #fff;
      box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
    }

    core-toolbar paper-tabs {
      box-shadow: none;
    }

    paper-tabs[noink][nobar] paper-tab.core-selected {
      color: #ffff8d;
    }

    paper-tabs.transparent-teal {
      background-color: transparent;
      color: #00bcd4;
      box-shadow: none;
    }

    paper-tabs.transparent-teal::shadow #selectionBar {
      background-color: #00bcd4;
    }

    paper-tabs.transparent-teal paper-tab::shadow #ink {
      color: #00bcd4;
    }

    h3 {
      font-size: 16px;
      font-weight: 400;
    }

  </style>
</head>
<body>
 <div>
    <paper-icon-button icon="arrow-forward" title="arrow-forward" onclick="clickAction(event)"></paper-icon-button>
 </div>
  <paper-tabs selected="0">
    <paper-tab>ITEM ONE</paper-tab>
    <paper-tab>ITEM TWO</paper-tab>
    <paper-tab>ITEM THREE</paper-tab>
  </paper-tabs>
  <script>
       function clickAction(e) {
        var t = e.target;
        if (t.localName === 'paper-icon-button') {
          if (!t.hasAttribute('disabled')) {
                var tabs = document.querySelector('paper-tabs');
                var index = tabs.selectedIndex;
                index = index+1 == tabs.children.length ? 0 : index + 1;
                tabs.selectIndex(index);
          }
        }
      }  
  </script>

</body>
</html>
分享给朋友:
您可能感兴趣的文章:
随机阅读: