目次
おさらいも兼ねて
HTML上のスタイルを変更するにはstyle=にて直接スタイルを指定するパターンとclass=にてCSSに定義されたクラスを指定するやりかたがある。Angularでの[class]と[class.xxxx]は後者に該当し、また状態によりスタイルを変更したい場合に使用する。
逆に変化の無いclass指定は(普通のスタイル指定は)
|
1 |
<div class='red'>赤くする</div> |
となる
[class]について
書式：[class]=’stringの変数名’
[class]は[class]='変数名'で指定する変数名の中身はCSSで使用するクラス名となる。つまり何かしらの条件で変数の内容を変更する＝スタイルの変更となる
|
1 2 3 4 5 6 7 8 |
<div [class]='cssStyle'>Hogehoge</div> // app.component.ts内で let cssStyle:string; どこかのclick():void { this.cssStyle = 'red'; } |
初期値は空なのでスタイルは何も指定さ/れないが、どこかのclickイベントが発生した時、cssで宣言されている.redのスタイルが適用される。通常のスタイル指定と同じように複数を指定する事も可能
|
1 2 3 4 5 6 7 8 |
<div [class]='cssStyle'>Hogehoge</div> // app.component.ts内で let cssStyle:string; どこかのclick():void { this.cssStyle = 'red big'; // ←cssのredクラスとbigクラスを指定 } |
[class]は１つしか宣言できない
[class]は一つのタグ内で一つしか宣言できない。エラーは出ないが複数指定した場合は最後に宣言したものが有効となる。
|
1 |
<div [class]="cssStyle1" [class]="cssStyle2"> // 最後に記載したcssStyle2のみ有効化される |
classと[class]は一緒に宣言できない
classと[class]の同時宣言も最後が有効となるようだ
|
1 |
<div class="hoge" [class]="cssStyle1"> // hogeは無視される |
[class.xxxx]について
書式：[class.xxx]=’booleanの変数名またはbooleanを返す式’
[class.xxxx]のxxxx部分はCSSのクラス名を指定する。CSSにredクラスが宣言されている場合[class.red]となる、[class.red]=’true’の時だけredが有効となる。つまり、tureの場合、「指定したCSSのクラスが宣言」。falseの場合「無視される」状態となる。
[class.red]='”ABCD” === “ABCD”‘などbooleanを返す式もできる。
|
1 2 3 4 5 |
// booleanの変数の場合 <div [class.myRed ]="isRed"> // 条件式としても使用できる <div [class.myRed ]="abc === cdf"> |
[class.xxxx]は複数指定しても大丈夫
|
1 2 3 4 5 6 |
<div [class.myRed]="isRed" [class.myBlue]="isBlue" [class.hoge1]="isHoge1 === hoge" [class.hoge2]="abc.length > cdf.length ? true: false" > |
プログラムのclassとCSSのclassがあるからごっちゃになるよなー。と思う今日このごろ