web-dev-qa-db-fra.com

Modifier dynamiquement la couleur d'arrière-plan de l'en-tête du panneau d'extension de tapis selon qu'il est développé ou non

J'ai eu du mal à trouver un moyen de changer dynamiquement la couleur d'arrière-plan d'un en-tête de panneau d'extension de conception de matériau selon que le panneau est développé ou non.

Lorsque le panneau est fermé, j'aimerais que la couleur d'arrière-plan soit blanche, mais lorsqu'elle est développée, je veux changer cette couleur en autre chose. Je ne vois pas quelque chose sur lequel je peux baser ce changement, peut-être que je manque quelque chose. Je suis nouveau à angular et pensais que je serais juste en mesure de le baser sur le paramètre de [expand] mais il semble que ce ne soit pas le cas.

mat-accordion
mat-expansion-panel
mat-expansion-panel-header
mat-expanded{
  font-size: 1.25em;
  background-color: white;
  background: white;
  color: #00838f;
  font-weight: 500;
}



mat-accordion
mat-expansion-panel
mat-expansion-panel-header {
  font-size: 1.25em;
  background-color: white;
  background: white;

  color: #00838f;
  font-weight: 500;
}


  mat-accordion
  mat-expansion-panel
  .mat-expansion-panel-body {
  background-color: white;
  padding-top: 5px;
}
.mat-expansion-indicator::after {
  color: #00838f;
}
<mat-accordion multi="true">
<mat-expansion-panel [expanded]="selectedBenefitCategories.indexOf(cat)!=-1" [hidden]="selectedBenefitCategories.indexOf(cat)===-1">
  <mat-expansion-panel-header>
    <i class="search-category-icon far fa-star"></i> &nbsp; {{cat}}
  </mat-expansion-panel-header>
  <ng-template matExpansionPanelContent>

    some content

  </ng-template>
</mat-expansion-panel>
</mat-accordion>
htmlcssangularmaterial-designangular6
4
Brandon Jerz

Le matériau angulaire ajoute des classes dynamiques basées sur l'état expanding.

mat-expanded serait celui que vous recherchez. Le problème est que cette classe est également attachée au contenu du panneau. Pour résoudre ce problème, vous pouvez simplement le combiner avec le .mat-expansion-panel-header sélecteur de classe.

En résumé, cela ressemblerait à ceci:

.mat-expansion-panel-header.mat-expanded {
  background: red;
}

Remarque: Angular Material ajoute également background: inherit sur l'état de vol stationnaire.

Si ce n'est pas le comportement que vous souhaitez, remplacez-le simplement comme ceci:

.mat-expansion-panel-header.mat-expanded,
.mat-expansion-panel-header.mat-expanded:hover {
  background: red;
}
11
Orlandster

Vous devez fournir un sélecteur CSS plus puissant que ceux par défaut fournis par angular material. Cela signifie inclure tous les états où angular ajoute background-color: inherit:

.mat-expansion-panel-header.mat-expanded,
.mat-expansion-panel-header.mat-expanded:hover,
.mat-expansion-panel-header.mat-expanded:focus {
    background-color: red;
}
1
Yonatan Naor