web-dev-qa-db-ja.com

Ionic 4.0でイオンアイテムの背景色を変更します

おはようございます

まだ誰もこれを要求していないことを願っています... this one のようないくつかの同様の投稿を見つけましたが、Ionic 4.0では機能しません。 Ionic 4.0は同じものを注入しないように見えるので、ここでは私にはうまくいかないようです

<div class='item-content'></div>

リンクされた投稿で説明されている要素。

Ionic 4.0イオンアイテム要素の背景色を変更するのに苦労しています。アプリに青色の背景があるのに、それを白い背景にしようとしています。

コードインスペクターで自分のスタイルが適用されていることがわかりますが、ブラウザーには表示されません。

これが私のコードのサンプルです：

<ion-item class="light-back">
  <ion-icon name="search" color="light"></ion-icon>
    <ion-input required type="text" placeholder="Search for a site" color="light">
  </ion-input>
</ion-item>


.light-back{
    background-color: #fff;
}

以下は、私が見ているもののスクリーンショットです。これは、要素（検索バー）がスタイルを受け取っているが、実装も表示もしていないことを示しています。

enter image description here

何かアドバイスをいただければ幸いです。

htmlcssionic-frameworksass
16
phunder

この特別なionic CSSルールを使用します：

ion-item{
   --ion-background-color:#fff;
}
25
labago

私はionic 4.で動作しているものを見つけました。4。ion-listとion-itemを実装した.scssファイルに以下の2つのcssを適用します。

    ion-item {
         --ion-background-color: white !important;
    }

      .item, .list, .item-content, .item-complex {
        --ion-background-color: transparent !important;
      }
6
Kapil Raghuwanshi

解決策を見つけたようです。 ion-item要素にcolor = "light"を追加するだけです。下記を参照してください：

<ion-item class="light-back" color="light">
  <ion-icon name="search" color="light"></ion-icon>
    <ion-input required type="text" placeholder="Search for a site" color="light">
  </ion-input>
</ion-item>

問題は、変数からプライマリカラーに設定したテーマに基づいて他のコードが挿入されるため、再びライトテーマを使用していることを示す必要があります（変数で#fffに設定済み） ）。

これが将来の誰かを助けることを願っています:)

2
phunder

複数の要素の背景色を変更したい場合

 <ion-item style="--ion-background-color: rgb(206, 197, 148);">
    <ion-textarea autofocus id="textinput" type="text" value="escribe un mensaje" style="width: 90%; height: 70%;  font-family: 'Gil Sans';"></ion-textarea>
    <ion-icon name='send'></ion-icon>
</ion-item>

enter image description here

2
Carlos Montiel

@ labago answer は部分的に機能しますが、どの回答も完全には機能しませんでした。

--ion-background-colorパディングやマージンのない静的コンテンツに対してのみ機能します。パディングの適用を開始するとすぐに意図した結果が得られないので、以下はアプリで使用した回避策です。

ion-item {
  padding:20px;
  --ion-background-color: blue;
  background: blue; 
}
2
Gangadhar JANNU

これはionic 4

1-ファイルを開く：src/theme/variables.scss 2-コードの色を挿入：

  /** transparent **/
  --ion-color-transparent: #fafafa;
  --ion-color-transparent-rgb: 245, 61, 61;;
  --ion-color-transparent-contrast: #ffffff;
  --ion-color-transparent-contrast-rgb: 255, 255, 255;
  --ion-color-transparent-shade: #dcdcdc;
  --ion-color-transparent-tint: #fbfbfb;

obs：#fafafa透明色に対応

2-ファイルglobal.scssを開き、コードを挿入します。

.ion-color-transparent {
    --ion-color-base: var(--ion-color-transparent) !important;
    --ion-color-base-rgb: var(--ion-color-transparent-rgb) !important;
    --ion-color-contrast: var(--ion-color-transparent-contrast) !important;
    --ion-color-contrast-rgb: var(--ion-color-transparent-contrast-rgb) !important;
    --ion-color-shade: var(--ion-color-transparent-shade) !important;
    --ion-color-tint: var(--ion-color-transparent-tint) !important;
}

3-イオンアイテムで透明色を呼び出す

<ion-item color="transparent">

</ion-item>
1
Edvan Souza