如何更改垫扩展面板的切换图标？

Question

切换 a 的默认图标mat-expansion-panel是>。设置hideToggletrue 只是隐藏切换图标。有什么办法可以改变它吗？我在官方文档中什么也没找到。如果状态分别是关闭或打开，我想使用+或-图标。

Answer 1

正如 Angular Material Expansion Panel文档中所述，我们可以自定义 的样式mat-extension-panel-header，从而允许您自定义图标。

首先，您可以通过将hideToggle属性设置为 false 来隐藏原始图标。此外，我们指定事件绑定(opened)，并(closed)给panelOpenState财产。可以签出的其他属性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图标来表示mat-extension-panel. 您可以在此处访问演示。

Answer 2

有一个类.mat-expanded适用于<mat-expansion-panel>

所以你可以只使用 CSS 来改变图标，不需要 JS。

• 要将向下箭头更改为向上箭头：

.mat-expanded .mat-expansion-panel-header-title .material-icons{
  transform: rotate(180deg);
}

    <mat-panel-title>
      <span class="material-icons">expand_more</span>
      Panel with icon `transform`
    </mat-panel-title>

• 交换图标：

    <mat-panel-title>
      <span class="material-icons">expand_more</span>
      Panel with icon `transform`
    </mat-panel-title>

    <mat-panel-title>
      <span class="material-icons open">open_in_full</span>
      <span class="material-icons close">close_fullscreen</span>
      Panel with open/close
    </mat-panel-title>

这是演示https://stackblitz.com/edit/angular-e2fnlm的链接

当您有多个材质扩展面板时，CSS 解决方案有效

Answer 3

为示例中的 mat-expansion-panel 面板命名。使用 mat-expansion-panel 的 Expanded 属性来显示或隐藏 + 或 - 图标。

 <mat-expansion-panel #panel  hideToggle>
        <mat-expansion-panel-header>
             <mat-panel-title>
                        Buttons
             </mat-panel-title>
             <mat-icon >{{panel.expanded? 'remove' : 'add'}}</mat-icon>
                        
        </mat-expansion-panel-header>
                   
  </mat-expansion-panel>