193/210
ionic(angular)の画面デザインの動的変更
この連載の最初の頃に四苦八苦していた画面デザインの動的変更方法、今更ながら理解した気がしますので備忘録的メモです。
例えば、状況によって背景色を変更させたい場合(HPゲージをHPの値により青から赤に変更など)
.scssファイルに様々な背景色を設定したクラスを記述
//background-color
.bg_antiquewhite { background-color:antiquewhite;--background:antiquewhite;}
.bg_white { background-color:white;--background:white;}
.bg_pink { background-color:pink;--background:pink;}
.bg_palegreen{background-color: palegreen;--background: palegreen;}
.bg_orange{background-color: orange;--background:orange;}
・.tsに背景色に対応する変数を設定
testColor="palegreen";
・.htmlの記述例
<ion-item slot="header" [ngClass]="{bg_orange:testColor=='orange',bg_palegreen:testColor=='palegreen'}">
これはごく単純な例ですが、.html内の[ngClass]="{クラス名 : 条件式, ・・・・}"という形でクラスと条件式を列挙すれば、背景色と文字色など様々なコントロールが可能になります。
組み合わせれば、相当複雑な動的デザインの変更も可能になると思われます。
