在现代 Web 应用中，标签页是常见的 UI 组件。@polymer/paper-tabs 是 Polymer 的一个组件库，提供了一个易于使用的标签页组件。通过使用 @polymer/paper-tabs，我们可以快速、简便地实现标签页 UI 功能。本文将介绍 @polymer/paper-tabs 的使用教程。
快速上手
在使用 @polymer/paper-tabs 之前，首先需要在项目中安装它。
npm install @polymer/paper-tabs
安装成功后，在 HTML 文件中引入 @polymer/paper-tabs 组件。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------------------
------- ------------- --------------------------------------------------------------
-------
------
----------- -------------
-------------- -------------
-------------- -------------
-------------- -------------
-------------
-------
-------paper-tabs 元素定义了一个 tab 容器，而 paper-tab 元素定义了 tab。
选项
paper-tabs 组件有多个选项可以配置。
selected
通过设置 selected 属性，可以设置默认选中的标签。selected 属性的值为 paper-tab 元素在 paper-tabs 中的索引。例如：
<paper-tabs selected="1"> <paper-tab>Tab 1</paper-tab> <paper-tab>Tab 2</paper-tab> <paper-tab>Tab 3</paper-tab> </paper-tabs>
上述代码将默认选中第二个标签页。
noink
通过设置 noink 属性，可以禁用点击标签页时的水波纹效果。
<paper-tabs noink> <paper-tab>Tab 1</paper-tab> <paper-tab>Tab 2</paper-tab> <paper-tab>Tab 3</paper-tab> </paper-tabs>
no-bar
通过设置 no-bar 属性，可以隐藏标签栏底部的竖线。
<paper-tabs no-bar> <paper-tab>Tab 1</paper-tab> <paper-tab>Tab 2</paper-tab> <paper-tab>Tab 3</paper-tab> </paper-tabs>
no-slide
通过设置 no-slide 属性，可以关闭标签栏滑动效果。
<paper-tabs no-slide> <paper-tab>Tab 1</paper-tab> <paper-tab>Tab 2</paper-tab> <paper-tab>Tab 3</paper-tab> </paper-tabs>
scrollable
通过设置 scrollable 属性，可以启用滚动式标签栏。
<paper-tabs scrollable> <paper-tab>Tab 1</paper-tab> <paper-tab>Tab 2</paper-tab> <paper-tab>Tab 3</paper-tab> </paper-tabs>
事件
@polymer/paper-tabs 组件提供了多个事件来帮助我们构建更加丰富的应用。
iron-select
iron-select 事件在用户选择标签页时触发。可以通过监听这个事件来执行一些自定义逻辑。
-- -------------------- ---- -------
----------- ----------------------- ------------------------------
-------------- -------------
-------------- -------------
-------------- -------------
-------------
--------
-------- ------------------- -
------------------------ -----------------------
-
---------上述代码中，我们监听了 iron-select 事件，并使用 handleSelect 函数来处理这个事件。
iron-deselect
iron-deselect 事件在用户取消选择标签页时触发。
-- -------------------- ---- -------
----------- ----------------------- ----------------------------------
-------------- -------------
-------------- -------------
-------------- -------------
-------------
--------
-------- --------------------- -
-------------------------- -----------------------
-
---------示例
以下是一个使用 @polymer/paper-tabs 组件的完整示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------------------
------- ------------- -----------------------------------------------------------------
-------
------
----------- ------------------------
-------------- -------------
-------------- -------------
-------------- -------------
-------------
-----
---- ------------------- -- ----------------------
---- ------------------- -- ----------------------
---- ------------------- -- ----------------------
------
--------
-------- ------------------- -
------------------------ -----------------------
-
-------- --------------------- -
-------------------------- -----------------------
-
--- --- - -------------------------------
----------------------------------- --------------
------------------------------------- ----------------
---------
-------
-------在本示例中，我们创建了一个具有三个标签页的 paper-tabs 组件，并监听了 iron-select 和 iron-deselect 事件。我们还创建了与每个标签页对应的内容，并使用 hidden$ 指令来控制它们的可见性。
结论
@polymer/paper-tabs 组件是一个功能强大且易于使用的 Polymer UI 组件库，可以通过它快速创建标签页 UI。我们可以通过它的属性和事件来自定义标签页组件的行为。希望这篇教程能够帮助你学习和使用 @polymer/paper-tabs 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f7580cba9b7065299ccbcd5