用于切换mat-expansion-panel
的默认图标是>
。设置 hideToggle
true 只是隐藏切换图标。有什么办法可以改变吗?我在官方文档中没有找到任何内容。如果状态分别为关闭或打开,我想使用 +
或 -
图标。
最佳答案
如 Angular Material 扩展面板上所述 documentation ,我们可以自定义 mat-extension-panel-header
的样式,这反过来又允许您自定义图标。
首先,您可以通过将 hideToggle
属性设置为 true 来隐藏原始图标。此外,我们将事件绑定(bind) (opened)
和 (close)
分配给 panelOpenState
属性。您可以通过 here 查看 mat-expansion-panel
的其他属性.
<mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"hideToggle="true">
接下来,在您的 mat-panel-description
上,添加所需的自定义图标。显示的图标将取决于面板的状态。对于此示例,我们使用 Material Icons 中的图标.
<mat-panel-description>
<mat-icon *ngIf="!panelOpenState">add</mat-icon>
<mat-icon *ngIf="panelOpenState">remove</mat-icon>
</mat-panel-description>
我已经编辑了 Angular 文档中的原始示例,以便它使用自定义 +
和 minus
图标来表示 的展开/折叠状态>垫扩展面板
。您可以通过 here 访问演示.
关于javascript - 如何更改垫扩展面板的切换图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56619213/