@npm-polymer/iron-selector 是一个功能强大的 Polymer 元素，它可以支持选择器模式，并且在组件编程中非常常见。在本文中，我们将介绍如何使用 npm 包 @npm-polymer/iron-selector 来创建可复用的选择器元素。
安装
首先，你需要在你的项目中安装 @npm-polymer/iron-selector。你可以通过使用 npm 命令行工具来完成它：
npm install @npm-polymer/iron-selector --save
实现
一旦你成功安装了 @npm-polymer/iron-selector，你就可以创建一个元素来使用它了。首先，创建一个新的 Polymer 元素 my-selector，并导入 @npm-polymer/iron-selector 包。
-- -------------------- ---- -------
---- ---------------- ---
----- ------------ -------------------------------------------
----------- -----------------
----------
-------
-- -------------- --
--------
---- -- ------------- --------- ---
-------------- ----------------------- ------------------------ ------------------
-- ----------- -----------------
-- ------------ ------------------
-- -------------- --------------------
----------------
-----------
--------
---------
--- --------------
----------- -
--------- -
----- -------
------ ------
-
-
---
---------
-------------在这个元素中，我们定义了一个属性 selected 来跟踪用户选择的内容。我们设置了默认值 'home'。我们也定义了包含 anchor 元素的 iron-selector，以供选择。
注意，在这个示例中，我们使用了 attr-for-selected 属性来定义选定哪些元素。在这里，我们将 name 属性用作选定的属性。
使用
一旦你创建了选择器元素，你可以像使用任何其他元素一样使用它。
在下面的示例中，我们将 my-selector 元素添加到页面。当用户点击某个链接时，它会被设置为选择的元素，并将 selected 属性更新为所选元素的 name 值。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------------
------- --------------------------------------------------------
----- ------------ ------------------------
-------
------
------------ ----------------------------
--------
-- ------
------------------------------------------------------------------- --------------- -
------------------------ ----------------------------------------
---
---------
-------
-------运行示例，当你选择不同的选项时，你将看到在控制台中打印出的所选项目的名称。
总结
在本文中，我们介绍了如何安装和使用 @npm-polymer/iron-selector 包，在 Polymer 元素中创建可复用的选择器元素，并在示例代码中演示了如何使用它们。 @npm-polymer/iron-selector 是一个功能强大和灵活的元素，它可以方便地集成到你的 Polymer 应用程序中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff281e8991b448ddb50