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

Question

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

Answer 1

您可以在 mat-expansion-panel-header 中使用 mat-icon。

请检查 this stackblitz 上的工作示例。

对于 + 图标，您可以使用 <mat-icon>add</mat-icon>

<mat-accordion>
  <mat-expansion-panel hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-icon>add</mat-icon>
  </mat-expansion-panel-header>

  <mat-form-field>
      <input matInput placeholder="First name">
  </mat-form-field>

  <mat-form-field>
     <input matInput placeholder="Age">
  </mat-form-field>
</mat-expansion-panel>

Answer 2

如 Angular Material 扩展面板 documentation 所述，我们可以自定义 mat-extension-panel-header 的样式，这反过来又允许您自定义图标。

首先，您可以通过将 hideToggle 属性设置为 false 来隐藏原始图标。此外，我们将事件绑定 (opened) 和 (closed) 分配给 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 图标来表示 expanded/collapsed 状态mat-extension-panel。您可以通过 here.

访问演示

Answer 3

对于那些感兴趣的人，这里有一个使用多个扩展面板的示例：

查看：

<mat-accordion>
  <mat-expansion-panel *ngFor="let panel of panels; let i = index"
      (opened)="panelOpenState[i] = true" (closed)="panelOpenState[i] = false"
      hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title>
        {{panel.title}}
      </mat-panel-title>
      <span *ngIf="!panelOpenState[i]">Show</span>
      <span *ngIf="panelOpenState[i]">Hide</span>
    </mat-expansion-panel-header>

    Panel Content
  </mat-expansion-panel>
</mat-accordion>

分量：

export class PanelComponent implements OnInit {
  panels: [];
  panelOpenState: boolean[] = [];

  ngOnInit() {
    // loop to add panels
    for (let i = 0; i < 5; i++) {
      this.panels.push({ title: i });
      this.panelOpenState.push(false);
    }
  }
}

Answer 4

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

 <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>

Answer 5

有一个 class .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-expansion-panel-header-title .open,
.mat-expanded .mat-expansion-panel-header-title .close{
  display: inline-block;
}
.mat-expanded .mat-expansion-panel-header-title .open,
.mat-expansion-panel-header-title .close{
  display: none;
}

    <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>

这是一个 link 的演示 https://stackblitz.com/edit/angular-e2fnlm

CSS 解决方案在您有 多个 Material 扩展面板时有效

Answer 6

将 hideToggle 添加到 mat-expansion-panel :

<mat-expansion-panel (opened)="panelOpenState = true"
                             (closed)="panelOpenState = false" hideToggle>

并添加图标：

 <mat-expansion-panel-header>
            <mat-icon>add</mat-icon>

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

How to change toggle icon of mat-expansion-panel?

javascript

typescript

angular-material

angular

angular-material-7