千夜一夜

人生は短い、それはまるでたった1日のように

Angular materialトグルボタン選択時のCSSクラス

本ページはプロモーションを含んでいます。

Angular materialのトグルボタン(Button toggle)パーツを使用する際、選択している側のボタンに対してCSSを適用させたい時に指定するクラスを確認しました。

mat-button-toggle-checked

Angular material公式ドキュメントのトグルボタン項目ページにはCSSについて記載がなく、公式ドキュメント上で開発ツールを開き選択切り替え前後のクラスを確認し特定しました。("Angular Material toggle button selected"等で検索もしたものの、結局は開発ツールを使うのが早かったです。)

CSSファイル内での指定例はこちら。

.mat-button-toggle-checked {

    background-color: #e0e0e0;

    font-weight:bold;

}

これを追加すると、クリックしたボタンの背景色が変わり文字が太字になります。

 

特定のボタンをデフォルトで選択する方法は、こちらで紹介されていたvalueにcheckedを追加する手順が参考になりました。

checkedを追加したボタンが初期選択された状態になります。

<mat-button-toggle-group name="favoriteColor" #colorGroup="matButtonToggleGroup">

    <mat-button-toggle value="red">Red</mat-button-toggle>

    <mat-button-toggle value="green" checked>Green</mat-button-toggle>

    <mat-button-toggle value="blue">Blue</mat-button-toggle>

</mat-button-toggle-group>

複数の方法が載っていますが、これが楽でした。

 

参考

https://material.angular.io/components/button-toggle/

https://www.concretepage.com/angular-material/angular-material-button-toggle-default-selected