Zoeken op website

javascript - Hoe wijzig je het omschakelpictogram van mat-expansion-panel?

Het standaardpictogram voor het schakelen van een mat-expansion-panel is >. Het instellen van hideToggle op true verbergt alleen het schakelicoon. Is er een manier om het te wijzigen? Ik heb niets gevonden in de officiële documentatie. Ik wil het + of - pictogram gebruiken als de status respectievelijk gesloten of geopend is.

Antwoord #1

Zoals vermeld in de documentatie van het Angular Material Expansion Panel, kunnen we de stijlen van de mat-extension-panel-header aanpassen, wat op zijn beurt toestaat dat je de iconen kunt aanpassen.

Allereerst verberg je het originele pictogram door de hideToggle-attribuut op true te zetten. Daarnaast wijzen we de gebeurtenisbindingen (opened) en (closed) toe aan de panelOpenState-eigenschap. Je kunt de andere eigenschappen van mat-expansion-panel hier bekijken.

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

Vervolgens, voeg je op je mat-panel-description de vereiste aangepaste iconen toe. De weergegeven iconen zijn afhankelijk van de staat van het paneel. Voor dit voorbeeld gebruiken we de iconen van Material Icons.

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

Ik heb het oorspronkelijke voorbeeld uit de Angular-documentatie bewerkt, zodat het de aangepaste + en minus pictogrammen gebruikt om de uitgeklapte/ingeklapte staat van het mat-extension-panel aan te geven. Je kunt de demo hier bekijken.

Antwoord #2

Er is een klasse .mat-expanded die wordt toegepast op een <mat-expansion-panel>

Dus je kunt gewoon CSS gebruiken om het pictogram te wijzigen, geen JS nodig.

  • Om de pijl van omlaag naar omhoog te veranderen:
.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>
  • Om pictogrammen te wisselen:
.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>

Hier is een link naar een demo https://stackblitz.com/edit/angular-e2fnlm

CSS-oplossing werkt met meerdere Material Expansion Panels

Gerelateerde artikelen