Angular Material 扩展面板

<mat-expansion-panel> 提供可展开的摘要视图。

<mat-expansion-panel>，一个 Angular 指令，用于创建可展开的细节/摘要视图。

• <mat-expansion-panel-header> − 代表标题部分。包含面板的摘要，并充当展开或折叠面板的控件。
• <mat-panel-title> − 代表面板标题。
• <mat-panel-description> − 代表面板摘要。
• <mat-action-row> − 代表底部的操作面板。

app.component.html

app.component.ts

app.component.css

输出

扩展面板内容

头文件

<mat-expansion-panel-header> 显示面板内容的摘要，并充当展开和折叠的控件。 此标题可以选择包含 <mat-panel-title> 和 <mat-panel-description>，它们格式化标题内容以符合 Material Design 规范。

这是内容的摘要

默认情况下，扩展面板标题在标题末尾包含一个切换图标，以指示扩展状态。 可以通过 hideToggle 属性隐藏此图标。

操作栏

操作可以选择包含在面板底部，仅在扩展处于展开状态时可见。

禁用面板

可以使用 disabled 属性禁用扩展面板。 禁用的扩展面板不能由用户切换，但仍然可以通过编程方式进行操作。

手风琴

多个扩展面板可以组合成一个手风琴。 multi="true" 输入允许独立设置扩展状态。 当 multi="false"（默认）时，一次只能展开一个面板

懒加载

默认情况下，即使面板已关闭，扩展面板内容也将被初始化。 为了改为延迟初始化，直到面板打开，内容应作为 ng-template 提供

一些延迟的内容

可访问性

扩展面板旨在模仿本机 <details> 和 <summary> 元素的体验。 扩展面板标题的 role="button"，并且还具有属性 aria-controls，其值为扩展面板的 id。

扩展面板标题是按钮。 用户可以使用键盘激活扩展面板标题，以在展开状态和折叠状态之间切换。 由于标题充当按钮，因此不应将其他交互元素放置在标题内。

示例

以下是修改后的模块描述符 app.module.ts 的内容。

以下是修改后的 HTML 主机文件 app.component.html 的内容。

输出

详细信息

首先，我们使用 mat-expansion-panel 创建了扩展面板。

然后，我们向其中添加了标题、副标题和内容。