1. 什么是 @embarq/ngx-accordion
@embarq/ngx-accordion 是一个 Angular2+ 的折叠面板组件，它的特点是设计简洁，易于使用。它可以支持多个折叠面板之间的切换，包含了常见的面板操作和动画效果。通过使用该组件可以快速搭建一个可折叠的页面模块。
2. @embarq/ngx-accordion 安装和基本用法
安装
在你的 Angular2+ 项目中，通过 npm 安装 @embarq/ngx-accordion：
--- ------- --------------------- ------
导入
在你的组件中，通过以下代码导入 @embarq/ngx-accordion：
------ - --------------- - ---- ------------------------
然后，将 AccordionModule 添加到你的模块中的 imports 数组中：
-----------
---
-------- -
---
----------------
---
--
---
--
------ ----- --------- - -使用
在你的组件模板中，添加 Accordion 组件即可：
------------ ----------------
-------- -------------
------
----------
-------- -------------
------
----------
-------- -------------
------
----------
--------------如果要设置多个折叠面板可以同时展开，将 single 属性设置为 false 即可。
3. 属性和事件
Accordion 组件属性
single：布尔型，判断是否只能展开一个折叠面板。true表示只能展开一个，false表示可以同时展开多个。默认值为true。
Panel 组件属性
header：字符串型，面板标题。open：布尔型，判断面板是否展开。true表示展开，false表示关闭。默认为false。
Panel 组件事件
onOpen：面板展开时触发的事件onClose：面板关闭时触发的事件
4. 完整示例
-----
-----------------
-------------
-------- -------------
------
----------
-------- -------------
------
----------
-------- -------------
------
----------
--------------
-------------------
------------ -----------------
-------- -------------
------
----------
-------- -------------
------
----------
-------- -------------
------
----------
--------------
------5. 总结
@embarq/ngx-accordion 是一个非常方便、易用的折叠面板组件，适用于快速搭建可折叠页面模块。同时，该组件也支持多个面板同时展开，可以满足不同的业务需求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005596681e8991b448d6e6c