使用 Polymer 在导航菜单栏中滚动箭头

Question

我选择了带有选项卡的导航菜单栏来满足我的申请要求。

如果我在导航模式下设置七个标签，window 宽度足以显示所有标签。当我添加超过七个时，选项卡是可见的，我可以通过水平滚动来访问它们。虽然，选项卡仅在向右滚动时可见，并且用户可能不知道还有更多选项卡可用，所以我想在我的工具栏中添加滚动箭头。

我正在使用聚合物。如何将滚动箭头添加到我的工具栏？谢谢。

我还想在应用程序抽屉中添加滚动条。也请帮助我。

Answer 1

使用 Polymer 的 <paper-tabs>，您可以设置 scrollable 属性以启用滚动箭头。

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo'
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-tabs/paper-tabs.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <paper-tabs selected="0" scrollable>
        <paper-tab>NUMBER ONE ITEM</paper-tab>
        <paper-tab>ITEM TWO</paper-tab>
        <paper-tab>THE THIRD ITEM</paper-tab>
        <paper-tab>THE ITEM FOUR</paper-tab>
        <paper-tab>FIFTH</paper-tab>
        <paper-tab>THE SIXTH TAB</paper-tab>
        <paper-tab>NUMBER SEVEN</paper-tab>
        <paper-tab>EIGHT</paper-tab>
        <paper-tab>NUMBER NINE</paper-tab>
        <paper-tab>THE TENTH</paper-tab>
        <paper-tab>THE ITEM ELEVEN</paper-tab>
        <paper-tab>TWELFTH ITEM</paper-tab>
      </paper-tabs>
    </template>
  </dom-module>
</body>

codepen

使用 Polymer 在导航菜单栏中滚动箭头

Scroll arrow in navigation menu bar using Polymer

polymer

polymer-1.0