如何使用Ionic 4创建手风琴列表？

Question

问我如何创建“手风琴列表”。

我需要使用“关于我们”，“服务”示例的几部分内容，单击此按钮后，我将显示信息。

我希望你能帮助我。在离子4中

Answer 1

这不是Ionic 4中包含的组件，但也不是很难解决的问题。

如果要使用现成的组件，则可以使用Angular Material的扩展面板。

如果您只想快速浏览一下，可能是这样的：

1. 生成组件
2. 设置面板扩展的标准高度（烦人，但这是CSS本身的限制，因此您必须这样做）
3. 使用CSS处理隐藏或扩展+动画
4. 使用一小段代码来切换展开状态
5. 根据手风琴的类型（一次打开一个或多个打开），您可能还想编写另一段代码以在打开一个新面板时折叠所有其他面板。

深入链接支持的注意事项：

1. 打开每个面板时，更新网址中的#fragment
2. 在页面加载时检查匹配的#fragment并将其展开

Josh上有一个教程- 在Ionic中创建手风琴列表。

关于Mastering Ionic的内容也有详细的教程。