随着前端技术的不断发展，越来越多的前端包被推向市场，其中 npm 是一个非常成熟的包管理工具。而 @npm-polymer/paper-tabs 正是其中的一员，它是 Polymer 的一个组件库，提供了丰富的样式和功能，适用于 Tabs 相关的组件开发。本文将详细介绍如何使用 @npm-polymer/paper-tabs。
安装和使用
使用 npm 安装 @npm-polymer/paper-tabs：
npm install --save @npm-polymer/paper-tabs
在 HTML 中引入相关组件：
<script type="module"> import '@npm-polymer/paper-tabs/paper-tabs.js'; import '@npm-polymer/paper-tabs/paper-tab.js'; </script>
paper-tabs 和 paper-tab 都继承自 Polymer.Element。paper-tabs 是 Tabs 的容器元素，而 paper-tab 是 Tabs 里的单个选项卡元素。我们可以使用以下代码创建一个 Tabs：
<paper-tabs> <paper-tab>Tab 1</paper-tab> <paper-tab>Tab 2</paper-tab> <paper-tab>Tab 3</paper-tab> </paper-tabs>
以上代码会创建一个有三个选项卡的 Tabs。
选项卡选中事件
我们可以使用 Google Polymer 中的 iron-select 事件来监听选项卡选中：
<paper-tabs selected="{{selected}}" on-iron-select="onTabSelect">
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>我们需要通过设置 selected 属性来控制当前选项卡的选中状态，通过监听 on-iron-select 事件来获取选中的选项卡的 index：
onTabSelect(event) {
console.log(event.detail.item.index);
// 输出当前选中的选项卡的 index
}自定义样式
如果你想要自定义 Tabs 的样式，你可以使用 --paper-tabs-selection-bar-color、--paper-tab-ink 和 --paper-tab-content 这些 CSS 变量来修改样式。
-- -------------------- ---- -------
-------
---------- -
--------------------------------- ----
-
--------- -
---------------- -----
-------------------- -
------ ------
-
-
--------
------------
-------------- -------------
-------------- -------------
-------------- -------------
-------------以上样式会将选项卡的选中框变成红色，选中时的水波纹变成蓝色，选项卡内容的文字变成绿色。
总结
通过使用 @npm-polymer/paper-tabs 包，我们可以快速构建出一个强大的 Tabs 组件，并自由地定制其样式以适应不同需求。通过监听 iron-select 事件，我们可以获取用户选择的选项卡的 index，从而实现其他更复杂的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff381e8991b448ddba9