ionicのデザイン動的変更例(背景色など)
まず教材版の進捗です。
覚えるごとに書きたいことが増えるのが悩みの種ですが、ゲームブックアプリのレビューも頂いたので、巻いていきたいと思います。
(あとで追加すればいい訳ですしね)
ionic経験3か月目ですが、思うに使い方サンプルがあれば、ionicはもっともっと広まったんじゃないかなと思います。
（まだリリースしていない）教材版でも紹介していますが、ページの動的変更もその一つだと思います。
例えばゲームブック的には、ページごとに
・朝焼けの大海原
・雪降る裏道
・時間停止ぽい
的なデザイン変更も可能です。(色々試しまくりましたが悪くない方法かと思います。）
まあ、やりすぎはゲームブック的にどうかなと思わないでも無いですが機能的には面白いですよね。
コード的には、scssファイルに各表現ごとにクラス名を決めてデザインを用意して、htmlファイルの反映したい部分にtsファイルでそのクラスを追加して実装しました。
以下コードの例です。(例のごとくインデントを全角スペースに変換しています)
home.page.scss
---------------------------------------------------------------
.clsNormal{ //明るめの背景に暗い文字色
--ion-background-color:#efe9c9;
--ion-text-color: #121512;
--ion-item-background: #efe9c9; //スマートフォンアプリにしない場合は不要かも？
}
.clsDawnOcean{ //グラデーション、夜明けの海のイメージ
--ion-background-color: linear-gradient(0deg, rgb(7, 42, 156), rgb(12, 3, 78) 31%,
rgb(150, 10, 50) 31%, rgb(166, 14, 65) 32%,rgb(40, 3, 40) 70%, rgb(20, 3, 20));
--ion-text-color: #eef5e0;
--ion-item-background: linear-gradient(0deg, rgb(7, 42, 156), rgb(12, 3, 78) 31%,
rgb(150, 10, 50) 31%, rgb(166, 14, 65) 32%,rgb(40, 3, 40) 70%, rgb(20, 3, 20));
}
.clsBlue{ //背景：青、文字色：白っぽく
--ion-background-color:#260366;
--ion-text-color: #eef5ee;
--ion-item-background: :#260366;
}
.clsAnimation{ //2秒間かけて色彩をグレイスケールに変更
--ion-background-color:#f0190a;
--ion-text-color: #eef5ee;
--ion-item-background: #f0190a;
filter: grayscale(95%);;transition: filter 2s;
}
---------------------------------------------------------------
.home.page.html
---------------------------------------------------------------
<ion-content id="screencolor" [fullscreen]="true">
色々コンポーネントなどを設置
</ion-content>
---------------------------------------------------------------
.home.page.ts
---------------------------------------------------------------
//変数宣言
ch2scss="clsNormal";
ch2prescss="clsNormal";
//コンストラクタ
constructor(){}
//描画後の最初の関数
ionViewDidEnter(){
//最初はノーマルクラスデザインの表示
let el=document.getElementById("screencolor");
el.classList.add(this.ch2scss)
}
//関数
//例えばページデータのデザインフィールドにクラス名があり
//その値をthis.ch2scssにセット後、この関数を走らせる
fnSetColorClass(){
let el=document.getElementById("screencolor");
el.classList.remove(this.ch2prescss) //前のクラスを除去
el.classList.add(this.ch2scss)
this.ch2prescss=this.ch2scss; //次のデザイン変更時に除去するため名称保持
}
---------------------------------------------------------------
