javascript - Hur ändrar man växlingsikonen för mat-expansion-panel?

Standardikonen för att växla ett mat-expansion-panel är >. Att sätta hideToggle till true döljer bara växlingsikonen. Finns det något sätt att ändra det? Jag hittade inget i den officiella dokumentationen. Jag vill använda + eller - ikon om tillståndet är stängt eller öppet respektive.

Svar #1

Som det anges i dokumentationen för Angular Material Expansion Panel kan vi anpassa stilarna för mat-extension-panel-header, vilket i sin tur kommer att tillåta dig att anpassa ikonerna.

Först och främst döljer du den ursprungliga ikonen genom att sätta attributet hideToggle till true. Dessutom tilldelar vi händelsebindningarna (opened) och (closed) till panelOpenState-egenskapen. Du kan titta på de andra egenskaperna hos mat-expansion-panel här.

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

Nästa, på din mat-panel-description, inkluderar du de anpassade ikoner som krävs. De visade ikonerna kommer att bero på panelens tillstånd. För detta exempel använder vi ikonerna från Material Icons.

<mat-panel-description>
  <mat-icon *ngIf="!panelOpenState">add</mat-icon>
  <mat-icon *ngIf="panelOpenState">remove</mat-icon>
</mat-panel-description>

Jag har redigerat det ursprungliga exemplet från Angular-dokumentationen, så att det använder de anpassade + och minus-ikonerna för att ange den expanderade/ihopfällda statusen för mat-extension-panel. Du kan komma åt demon här.

Svar #2

Det finns en klass .mat-expanded som används på en <mat-expansion-panel>

Så du kan helt enkelt använda CSS för att ändra ikonen, ingen JS krävs.

  • För att ändra pilen från ner till upp:
.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>
  • För att byta ikoner:
.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>

Här är en länk till en demo https://stackblitz.com/edit/angular-e2fnlm

CSS-lösningen fungerar med flera Material Expansion Panels

Relaterade artiklar