Question

我选择了一个导航菜单栏，其中包含用于满足我的应用程序要求的标签。

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

我正在使用Polymer。如何将滚动箭头添加到工具栏？感谢。

此外，我还要将滚动条添加到app抽屉。请帮助我。

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

codepen

使用Polymer

1 个答案: