【Angular】テンプレートのスタイル指定を考える。

まえがき

AngularではCSSのスタイル指定方法が複数存在する。その中で乱立させるよりルールを決めた方が可読性が良くなると考えた。コーディング規約っぽいのを自分なりに…

ルール

  • styleの使用禁止
  • [style]の使用禁止
  • [class]の使用禁止
  • 固定スタイルはclassを使用する
  • 可変スタイルは[ngClass]を使用する
  • [ngClass]の値は”{‘class名’:boolean,’class名’:boolean,…”形式のみ使用する

このルールにした理由

styleの使用は論外と考えた、[class]は複数記載する事が可能なので、同じ文字が乱立する。

ngClassの記載方法は複数あるが、CSSのclass名がHTML上に見える方式のみにすることにより使用するスタイルclassがひと目で分かる。

Sample

固定スタイル

ごく一般的な指定方法。

固定スタイルは状態に関わらず一定のスタイルを提供し、classのみを使用する。

可変スタイル

条件によりクラスを変更したい場合。例えばエラー箇所を強調したい場合、tableなどの偶数行、もしくは奇数行などが該当する。

エラーの強調1

booleanの変数にて判定を行う場合

エラーの強調2

関数を用いて判定を行う場合

エラーの強調3

引数ありの関数を使用することができる

複数のクラスを指定

偶数行、最終行の強調

スポンサーリンク
レタリング(大)広告
レタリング(大)広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レタリング(大)広告