Question

刚开始使用Polymer建立一个简单的网站，我可以说这并不困难，但我想做一些我在文档中找不到的东西。

我有一个简单的网络应用程序，具有这样的html结构：

<body class="fullbleed vertical layout">
       <paper-toolbar>
            <paper-tabs>
                <paper-tab>TAB 1</paper-tab>
                <paper-tab>TAB 2</paper-tab>
                <paper-tab>TAB 3</paper-tab>
                <paper-tab>TAB 4</paper-tab>
            </paper-tabs>
    </paper-toolbar>
</body>

当我第一次单击选项卡时会显示滑块，然后当我选择另一个时，它会直接滑动到所选选项卡下。

但是我怎样才能在我的html文件中引用这种行为。当我悬停任何标签时，我想滑动此滑块。并在unhover efect返回滑块上显示当前标签。

我可以只使用css或者我必须使用javascript吗？

Answer 1

我强烈建议您实际上不使用悬停事件来执行此任务，因为这听起来像是一种破坏任何形式的用户体验的好方法。但是，要回答您的问题，您可以执行以下操作：

<paper-tabs selected="{{selected}}">
  <template is="dom-repeat" items="[[someArrayOfTabs]]">
    <paper-tab on-mouseover="_handleMouseover">Tab <span>[[item.index]]</span></paper-tab>
  </template>
</paper-tabs>

然后在你的Polymer脚本中：

_handleMouseover: function(e) {
  this.selected = e.model.index;
}

纸张标签滑块在悬停时移动

1 个答案: