web-dev-qa-db-ja.com

展開されているかどうかに基づいて、mat-expansion-panel-headerの背景色を動的に変更します

パネルが展開されているかどうかに基づいて、マテリアルデザインの拡張パネルヘッダーの背景色を動的に変更する方法を探すのに苦労してきました。

パネルが閉じているときは背景色を白にしたいのですが、パネルが展開されているときはその色を別の色に変更したいと思います。この変更の基にできるものを私は見ていません。おそらく何かが足りないのです。私はangularに不慣れで、[expanded]の設定に基づいてそれをベースにできると思っていましたが、そうではないようです。

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

Angular Materialは、expanding状態に基づいて動的クラスを追加します。

mat-expandedが探しているものです。問題は、このクラスがパネルコンテンツにもアタッチされることです。これを修正するには、.mat-expansion-panel-headerクラスセレクターと組み合わせるだけです。

まとめると、次のようになります。

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

注意：Angularマテリアルは、ホバー状態にbackground: inheritも追加します。

それが目的の動作でない場合は、次のように単純に上書きします。

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

angular materialによって提供されるデフォルトのセレクタよりも強力なCSSセレクタを提供する必要があります。これは、angularが追加されるすべての状態を含めることを意味します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