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

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

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

エラーが発生しました。

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

59/210

ionicカラーモード対策 (初心者はみんな引っかかるそうです)

手順を追って、カラーモード対策に挑みます。


まずsrc\app\home\home.page.html、<ion-content [fullscreen]="true">の適用範囲を見る事にします。


単純にタグにclassを付けて配色してみましたが効果なし。

まあ、調べませんがionic独自のコンポーネントなんで予想の範疇です。


技術的には"ウェブコンポーネント"と言うそうです。


ウェブコンポーネント

https://developer.mozilla.org/ja/docs/Web/Web_Components


興味深い話ではあるのですが、これに手を加えると絶対に後々大問題になる確信を持っていますので、より泥臭い方法を考えます。


・”css 全画面”で検索する


現状をおさらいします。


個々のパーツ(テキストやらラジオボタンなど)の色は変更できます。


出来ないのはその裏側!


ですので、各パーツの一番下に真っ白いカーペットを敷いてやろうという事です。


通常は、逆に全画面オーバーレイを一番上に持ってきて、一時的にユーザーの操作を無効にしたりするものですが、何でも使い方次第!


以下のような、敷物を作ります。


<div id="fullUnderlay"></div>


そして色々試しましたが、以下の条件で成功。


・<div id="fullUnderlay"></div>にz-indexはつけてはいけない。

 z-index=0ならば一応問題は無いようですが・・・


・ただしラジオボタン等のionicコンポーネント(部品)は"ion-list"あるいは"ion-radio-group"がうまく行かない。

(その下のラベルやラジオボタン自身は、classつけて配色可能)


これもionic独自のコンポーネントの問題ですね。


・”ion-content 配色”で検索


出来そうな情報はあるんですがよく判らない


・”Ionic 背景色”で検索


ほぼビンゴの情報発見!


Ionic 特定のページの背景色を変更する方法(ion-contentの色)

https://qiita.com/kokogento/items/e7b33967af41a534c080


判りやすかったけど、初心者はみんな困ってるわけですね・・・


ただラジオボタングループは、すんなりいかないのです。

が、最悪普通のラジオボタンにしますので何とかなるでしょう。

(もう少しあがきます)


午後にまとめます。投稿










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

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

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

↑ページトップへ