表示調整
閉じる
挿絵表示切替ボタン
▼配色
▼行間
▼文字サイズ
▼メニューバー
×閉じる

ブックマークに追加しました

設定
0/400
設定を保存しました
エラーが発生しました
※文字以内
ブックマークを解除しました。

エラーが発生しました。

エラーの原因がわからない場合はヘルプセンターをご確認ください。

88/210

補記①背景色の変更成功

今、まとめている最中ですが、新しい知見がかなり出てきそうなので補記として追加していきます。


今まで、背景変更が難しいあるいは無理と考えていましたが、出来ました。


状況:

ゲームブックのページによって、背景色を変えたいと考えていたが、選択肢の背景の変更がうまく行かなくて断念した。


ページ全体の背景は、ページ全体の大きさを持つ"Div"の背景色を変えれば成功していたが、選択肢の背景だけが取り残されていた。


ionicコンポーネントのradioボタンを使わないという選択肢もあったが、その場合、"src\app\home\home.page.html"と"src\app\home\home.page.ts"の双方向バインディングが面倒な事になる。


解決方法:

ionicのCSS変数を使う事により解決。


ただ、これ適用範囲が今一つわからないので、色々試す必要がある。


サンプルコード

"src\app\home\home.page.html"

---------------------------------------------------------------

<ion-item id="item1">

<ion-label>R:赤(#ff0000)</ion-label>

<ion-radio slot="start" value="#ff0000"></ion-radio>

</ion-item>

---------------------------------------------------------------

"src\app\home\home.page.ts"

---------------------------------------------------------------

let el = document.getElementById('item1') as HTMLElement;

el.style.setProperty('--background', '#36454f');

---------------------------------------------------------------

'--background'は、ionic定義なので当然普通のhtml要素には効きません。



ionicのCSS変数

https://ionicframework.com/docs/ja/theming/css-variables


評価をするにはログインしてください。
ブックマークに追加
ブックマーク機能を使うにはログインしてください。
― 新着の感想 ―
このエピソードに感想はまだ書かれていません。
感想一覧
+注意+

特に記載なき場合、掲載されている作品はすべてフィクションであり実在の人物・団体等とは一切関係ありません。
特に記載なき場合、掲載されている作品の著作権は作者にあります(一部作品除く)。
作者以外の方による作品の引用を超える無断転載は禁止しており、行った場合、著作権法の違反となります。

この作品はリンクフリーです。ご自由にリンク(紹介)してください。
この作品はスマートフォン対応です。スマートフォンかパソコンかを自動で判別し、適切なページを表示します。

↑ページトップへ