classとclass.xxxxの違い

前章でスタイルのコーディング規約を記述したが、[class]と[class.xxxx]の仕様を確認しておく。

HTML上のスタイルを変更するにはstyle=にて直接スタイルを指定するパターンとclass=にてCSSに定義されたクラスを指定するやりかたがある。Angularでの[class]と[class.xxxx]は後者に該当し、また状態によりスタイルを変更したい場合に使用する。逆に変化の無いclass指定は(普通のスタイル指定は)

<div class='red'>赤くする</div>

1

となる

[class]について

書式：[class]='stringの変数名'

[class]は[class]='変数名'で指定する変数名の中身はCSSで使用するクラス名となる。つまり何かしらの条件で変数の内容を変更する＝スタイルの変更となる

<!-- app.component.html -->
<div [class]='cssStyle'>Hogehoge</div>

1
2

// app.component.ts
let cssStyle:string;
どこかのclick():void {
  this.cssStyle = 'red';
}

1
2
3
4
5
6

初期値は空なのでスタイルは何も指定されていない。どこかのclickイベントが発生した時、cssで宣言されている.redのスタイルが適用される。通常のスタイル指定と同じように複数を指定する事も可能。

// app.component.ts
どこかのclick():void {
  this.cssStyle = 'red big';  // ←cssのredクラスとbigクラスを指定
}

1
2
3
4

[class]は１つしか宣言できない

[class]は一つのタグ内で一つしか宣言できない。エラーは出ないが複数指定した場合は最後に宣言したものが有効となる。

<div [class]="cssStyle1" [class]="cssStyle2"> <!-- 最後に記載したcssStyle2のみ有効化される -->

1

classと[class]は一緒に宣言できない

classと[class]の同時宣言も最後が有効となるようだ

<div class="hoge" [class]="cssStyle1">  <!-- hogeは無視される -->

1

[class.xxxx]について

書式：[class.xxx]='booleanの変数、またはbooleanを返す式'

[class.xxxx]のxxxx部分はCSSのクラス名を指定する。CSSにredクラスが宣言されている場合[class.red]となる、[class.red]='true'の時だけredが有効となる。つまり、trueの場合、「指定したCSSのクラスが宣言」。falseの場合「無視される」状態となる。 [class.red]='"ABCD"=== "ABCD"'などbooleanを返す式もできる。

<!-- booleanの変数の場合 -->
<div [class.myRed ]="isRed">
<!-- 条件式としても使用できる -->
<div [class.myRed ]="abc === cdf">

1
2
3
4
5

[class.xxxx]は複数指定しても大丈夫

<div
    [class.myRed]="isRed"
    [class.myBlue]="isBlue"
    [class.hoge1]="isHoge1 === hoge"
    [class.hoge2]="abc.length > cdf.length ? true: false"
>

1
2
3
4
5
6

← スタイルのコーディング規約即時入力チェック →