web-dev-qa-db-ja.com

Angular Material-選択したマットリストオプションの色を変更

mat-list-optionの選択したオプションの色を変更するにはどうすればよいですか？現在、私はこのようなものを持っています：

現在のリストenter image description here

オプション全体またはカードの「選択時」の色を緑に変更したい。このようなもの： - enter image description here

私のコードは次のとおりです：

<mat-selection-list #list>
    <mat-list-option *ngFor="let yuvak of yuvaks">
    {yuvak.name}
    {yuvak.phonenumber}
     </mat-list-option>
</mat-selection-list>
angularangular-materialangular2-templateangular-material2angular2-material
4
Tanmay Parmar

aria-selected="true"タグのmat-list-option属性を使用して、選択したオプションをターゲティングできます。
そして対応するcssプロパティを提供します。

mat-list-option[aria-selected="true"] {
  background: rgba(0, 139, 139, 0.7);
}

Stackblitz Working Demo

6
Abhishek Kumar

受け入れられた回答は問題なく機能しますが、ハードコードされたカラー値（background: rgba(0, 139, 139, 0.7)）を使用します。別のビルド済みマテリアルテーマに切り替えるか、カスタムテーマを使用する場合、このアプローチは実際にスタイルと色を壊します（ Theming your Angular Material app ） =ページ）。

したがって、SCSSを使用する場合は、コンポーネントのスタイルファイルで次のコードを使用できます。

_@import '~@angular/material/theming';

mat-list-option[aria-selected="true"] {
  background: mat-color($mat-light-theme-background, hover, 0.12);
}
_

上記のコードは_mat-select options_から変更されています-このようにして、アプリ全体で一貫した外観を実現できます：.mat-option.mat-selected:not(.mat-option-multiple) { background: mat-color($background, hover, 0.12);}

デモ： https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color- change-qaq1xr

または、暗いテーマを使用する場合は、次のようにコードを変更します。

_mat-list-option[aria-selected="true"] {
  background: mat-color($mat-dark-theme-background, hover, 0.12);
}
_

デモ： https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color- change-w8beng

カスタムカラーを使用するだけの場合は、 Material Specs から選択することをお勧めします。これもAngular Material Design scss で公開されています） =。

_$primaryPalette: mat-palette($mat-green);

mat-list-option[aria-selected="true"] {
  background: mat-color($primaryPalette, 500);
}
_

デモ： https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color- change-tt3nyj

0
andreivictor

ドロップダウン：

mat-list-optionにはmat-option.mat-activeオプションがアクティブなときにトリガーされ、mat-option.mat-selectedオプションが選択されている場合。以下をCSSに追加して、アクティブなスタイルまたは選択したスタイルを変更します。

.mat-option.mat-active {
  background: blue !important;
}

.mat-option.mat-selected {
  background: red !important;
}

動作中 デモ

選択リスト：

選択リストにはaria-selected属性。デフォルトではfalseです。アイテムを選択すると、trueに変わります。必要なのは、CSSを次のように設定することだけです。

.mat-list-option[aria-selected="true"] {
  background: rgba(200, 210, 90, 0.7);
}

動作中 デモ

0
Maihan Nijat