在前端开发中，UI 展示往往需要用到一些动态元素，如展开/折叠、切换等。而在实现这些动态元素时，一个方便的工具便是 npm 包 @npm-polymer/iron-collapse。
什么是 @npm-polymer/iron-collapse
@npm-polymer/iron-collapse 是针对 Polymer 开发的一个元素，它提供了一组动画效果以帮助展开/折叠元素，同时提供了一组可定制的事件。
如何使用
使用 @npm-polymer/iron-collapse 需要先安装它，可以通过以下命令进行安装：
npm install --save @npm-polymer/iron-collapse
安装完成后，在需要使用的元素模块中引入它：
import '@npm-polymer/iron-collapse/iron-collapse.js';
接下来，我们可以在 HTML 文件中使用 iron-collapse 元素：
<iron-collapse id="collapse"> <!-- 可折叠的内容 --> </iron-collapse>
需要注意的是，在 iron-collapse 元素外包裹的元素必须拥有一个 click 事件，比如这里的 button：
<button on-click="toggleCollapse">Toggle Collapse</button>
在 toggleCollapse 函数中，我们可以通过以下代码对 iron-collapse 进行操作：
toggleCollapse() {
const expand = !this.$.collapse.opened; // 当前是否为展开状态
this.$.collapse.toggle(expand); // 切换状态
}可定制的事件
除了提供基础的展开/折叠动画外，@npm-polymer/iron-collapse 还提供了一组可定制的事件，可以通过以下方式使用：
<iron-collapse id="collapse" on-iron-collapse-opened="_onCollapseOpened" on-iron-collapse-closed="_onCollapseClosed"> <!-- 可折叠的内容 --> </iron-collapse>
这里我们监听 iron-collapse-opened 和 iron-collapse-closed 事件，例如：
_onCollapseOpened(event) {
console.log('iron-collapse-opened', event);
}
_onCollapseClosed(event) {
console.log('iron-collapse-closed', event);
}示例代码
下面是一个示例代码，实现了一个基本的可折叠列表，展开/折叠状态使用 console.log 输出的方式打印：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-------------------- ------------
------- --------------
------ ----------------------------------------------
---------
-------
------
----
----
------- -------------------------------- ----------
-------------- -------------- ---------------------------------- ------------------------------------
----
-------- -------
-------- -------
-------- -------
-----
----------------
-----
----
------- -------------------------------- ----------
-------------- -------------- ---------------------------------- ------------------------------------
----
-------- -------
-------- -------
-------- -------
-----
----------------
-----
-----
--------
------------------------------------------------------ ------- -- -
-- --------------------- --- --------- -
----- -- - --------------------------------
-------------------------- - -------------
-
---
-------- ---------------- -
----- ------ - ------------------------
-------------------------------
-
-------- --------------- -
------------------- - ------ ----
-
-------- ---------------- -
------------------- - ------ ----
-
-------- --------------- -
------------------- - ------ ----
-
-------- ---------------- -
------------------- - ------ ----
-
---------
-------
-------在上述代码中，我们通过一个 ul 列表来实现多个可折叠的列表，点击按钮展开/折叠时，会输出当前的状态。同时，我们也监听了内置的 iron-collapse-opened 和 iron-collapse-closed 事件，可以根据需要添加内容。
结语
通过本文，我们学习了 npm 包 @npm-polymer/iron-collapse 的基本使用方式，并了解了它提供的可定制的事件。在实际开发中，我们可以用它来展开/折叠容器，实现更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fec81e8991b448ddafa