在移动端和 web 应用程序中，有许多采用折叠面板设计，因为这种设计可以方便地将内容组织成逻辑分组。折叠面板也可以用来隐藏内容，用户可以在需要查看时展开面板。在 angular2-mdl-ext 中，开发了 @angular2-mdl-ext/expansion-panel 这个 npm 包，它可以自动生成支持折叠面板的 AngularJS 组件，可以帮助前端开发人员快速构建具有折叠面板的应用程序。
安装
在使用 @angular2-mdl-ext/expansion-panel 之前，需要先确保必备的依赖项已安装。运行以下命令安装这些依赖项：
npm i -S @angular/core mdl-ext
然后，在项目中安装 @angular2-mdl-ext/expansion-panel，运行以下命令：
npm i -S @angular2-mdl-ext/expansion-panel
引入折叠面板
在应用程序中使用 @angular2-mdl-ext/expansion-panel 很简单，你只需要在模块中引用 MdlExpansionPanelModule 并将它添加到 imports 数组中即可：
-- -------------------- ---- -------
------ - ----------------------- - ---- ------------------------------------
-----------
-------- -
--------------
------------------------ -- ------
-----------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -其中，MdlExpansionPanelComponent 是从 MdlExpansionPanelModule 导出的组件。
折叠面板 API 参考
下面是 MdlExpansionPanelComponent 应该拥有的 API：
@Input()
panelTitle
@Input() panelTitle: string;
这个输入属性用于设置折叠面板标题的文字。
方法
togglePanel()
togglePanel();
这个方法可以使折叠面板在展开和折叠之间切换。
示例代码
你可以将以下代码添加到你的组件中，它将创建一个包含折叠面板的视图：
-- -------------------- ---- -------
---------------------
----------------------------
---------------------------------------------------------------
-------------------------------------
------- --------------- ------------- --------------------------
--------------------------------
---------
--------------------------------------
-----------------------------
-----------------------------
----
------------------------------
----------------------在这个代码中，我们创建了一个包含折叠面板的视图，并设置了标题和内容。同时，我们还添加了一个按钮，用于切换折叠面板的状态。当点击按钮时，onButtonClick() 事件将会被调用，这个事件可以用来实现更多的自定义功能。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
-------------------- ----------------------
----------------------------
---------------------------------------------------------------
-------------------------------------
------- --------------- ------------- --------------------------
--------------------------------
---------
--------------------------------------
-----------------------------
-----------------------------
----
------------------------------
----------------------
-
--
------ ----- ------------ -
--------------- -
---------------------------------
-
-你可以通过调用 togglePanel() 方法来在代码中的任何地方切换折叠面板。
到此，在使用 @angular2-mdl-ext/expansion-panel 方面，你已经掌握了一些基础知识，希望这篇文章对于你的技术提升和开发项目会有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005524c81e8991b448cfd3e