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

Question

切换

mat-expansion-panel

的默认图标是

>

。设置

hideToggle

true 只是隐藏切换图标。有什么办法可以改变吗？我在官方文档中没有找到任何内容。如果状态分别为关闭或打开，我想使用

+

或

-

图标。

Answer 1

如 Angular Material 扩展面板 documentation 中所述，我们可以自定义

mat-extension-panel-header

的样式，这反过来又允许您自定义图标。

首先，您可以通过将

hideToggle

属性设置为 true 来隐藏原始图标。此外，我们将事件绑定

(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

图标来表示

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

这是演示的链接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>

Answer 4

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

查看：

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

您可以在

mat-icon

中使用

mat-expansion-panel-header

。

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

对于

+

图标，您可以使用

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

即使您在 for 循环中与 mat-expansion-panel 一起迭代它，这也可以工作

1. 设置您的图标 - 例如“添加”和“删除”又名 + 和 -

2. 用类装饰它们（如果你想在关闭的面板上显示+，添加（+）上的“关闭”），所以它看起来像这样

    <mat-expansion-panel-header>
      <mat-icon class="close">add</mat-icon>
      <mat-icon class="open">remove</mat-icon>
      ...
   

3. 在 scss 中添加此样式（如果需要编辑选择器）。我直接在“mat-expansion-panel-header”下有如上所述的结构

    ::ng-deep mat-expansion-panel-header.mat-expanded > span > mat-icon.open {
        display:block;
    }
    ::ng-deep mat-expansion-panel-header:not(.mat-expanded) > span > mat-icon.open {
        display:none;
    }
   
    ::ng-deep mat-expansion-panel-header.mat-expanded > span > mat-icon.close {
        display: none;
    }
   
    ::ng-deep mat-expansion-panel-header:not(.mat-expanded) > span > mat-icon.close {
        display: block;
    }
   

Answer 7

将 hideToggle 添加到 mat-expansion-panel :

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

并添加图标：

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