随着前端技术的不断发展，现代化的前端开发越来越倚重于构建组件化、可重用的应用程序。为了方便实现这一需求，许多优秀的 npm 包被提供出来，其中一个非常受欢迎的包就是 @polymer/iron-dropdown。
@polymer/iron-dropdown 是一个 Polymer 元素，它提供了一个下拉列表框。在本教程中，我们将详细了解如何使用 @polymer/iron-dropdown，并提供示例代码来帮助理解。
安装 @polymer/iron-dropdown
在使用 @polymer/iron-dropdown 之前，需要先在项目中安装该 npm 包。使用以下命令进行安装：
npm install --save @polymer/iron-dropdown
此后，我们可以通过在 JavaScript 文件中导入 @polymer/iron-dropdown，以开始使用它。
使用 @polymer/iron-dropdown
@polymer/iron-dropdown 元素基于 Polymer 3，它的 API 基本上是通过属性来实现的。下面是一些常用属性的简要介绍：
opened: 布尔值，指示下拉列表框当前是否打开。disabled: 布尔值，指示下拉列表框是否已禁用。vertical-align: CSS 垂直对齐方式，如 "top", "middle", "bottom", "auto" 等。horizontal-align: CSS 水平对齐方式，如 "left", "right", "center", "auto" 等。allow-outside-scroll: 布尔值，指示在下拉列表框打开时是否允许页面滚动。no-overlap: 布尔值，指示下拉列表框是否在打开时覆盖其它元素。align-target: String, Element, 或者 null 值，指示下拉列表框将在哪个元素旁边对齐。focus-target: String or Element, 或者 null 值，指示当前应该聚焦在哪个子元素上。
下面是一个具体的例子，其中我们将使用 @polymer/iron-dropdown 来创建一个简单的下拉列表框。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
------- --------------
------ - ----- -------------- - ---- --------------------------------------
------ ------------------------------------------
----- --------- ------- -------------- -
------ --- ---------- -
------ -----
-----
------- --------------------------------- -----------------
-------------- ------------- ------------------------ ---------------------
------------- -------------
----------------
------
--
-
----------------- -
----- -------- - -------------------------------------------
------------------
-
-
----------------------------------- -----------
---------
-------
------
-------------------------
-------
-------让我们解释一下上面的代码：
我们通过导入 @polymer/iron-dropdown JS 模块，引入 @polymer/iron-dropdown 元素。
创建了一个新的 Polymer 元素，并定义了一个 HTML 模板。该模板中包含一个按钮，点击该按钮后将展开下拉列表框。
当点击按钮时，_toggleDropdown() 函数将被调用。该函数查找到 iron-dropdown 元素，然后调用该元素的 toggle() 方法。
最后，我们定义了一个自定义元素，并将其定义为 'my-element'。这个元素用作我们上面定义的 Polymer 元素的包装器。
结论
在本教程中，我们详细介绍了如何使用 @polymer/iron-dropdown 这个 npm 包来创建一个下拉列表框。我们提供了使用示例，以帮助您理解如何使用此包。学习 @polymer/iron-dropdown 可以帮助你更好地构建组件化前端应用程序。如果您正在开发这样的应用程序，我强烈建议您仔细研究@polymer/iron-dropdown，并考虑在您的项目中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f759008a9b7065299ccbcdb