javascript - 如何更改垫扩展面板的切换图标?

标签 javascript angular typescript angular-material angular-material-7

用于切换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/

相关文章:

angular - "error TS2694: Namespace ' angular ' has no exported member ' xxx '"升级后@types/angular

javascript - DefinelyTyped如何将声明文件绑定(bind)到JavaScript库?

javascript - 自定义光标 - 悬停时增长

javascript - 需要澄清严格模式下的 JavaScript 代码行为

javascript - 在 Canvas 上绘制时图像尺寸放大

html - 获取不正确的 offsetWidth 和 offsetHeight 值

javascript - 如何使用 jQuery 动态添加 html,并在元素上添加点击监听器?

asp.net - 使用 ASP .Net Core(非 mvc)的 Angular 2 路由

angular - 无法解析模块@angular/router/src/router_config_loader 中的错误

使用类方法更新属性时 Typescript 类型缩小过于严格