web-dev-qa-db-ja.com

CSSのIonic ion-itemの背景色を変更する

次のコードを追加しましたstyle="background-color: #C2A5A5 !important。しかし、それは私にとってはうまくいきませんでした。イオンアイテムに背景色を追加するにはどうすればよいですか？.

<ion-item class="item-remove-animate item-avatar item-icon-right" style="background-color: #C2A5A5 !important" ng-repeat="detail in details" type="item-text-wrap" ng-controller="ChatsCtrl"  ng-click="openShareModel(detail)">
    <img ng-src="{{profilepic.profileimageurl}}">

    <h2>{{detail.date | date :'fullDate'}}</h2>
    <h2>{{detail.title}}</h2>
    <p>{{detail.description}}</p>
    <i class="icon ion-chevron-right icon-accessory"></i>

    <ion-option-button class="button-assertive" ng-controller="ChatsCtrl" ng-click="remove(detail.id)">
      Delete
    </ion-option-button>

  </ion-item>
htmlcssionic
13
Rajitha Perera

Ionicは<ion-item>内に要素を注入し、要素に次の構造を与えています：

<ion-item>
  <div class="item-content">
  </div>
</ion-item>

Ionic CSSにはCSSプロパティが含まれます。

.item-content {
  background-color:#ffffff;
}

追加したインラインCSSは、#ffffff背景を持つ要素の背後にある要素に適用されているため、背景色が表示されません。

次のCSSをIonic CSSファイルに追加することにより推奨されるように、背景色を.item-content要素に適用するか、カスタムCSSファイルを作成して<link>ヘッダーの次のように、

.item .item-content {
  background-color: transparent !important;
}

これが 作業デモ です。

24
Brett DeWoody

単に、variables.scssファイル（新しい色を定義することもできます）そのような

$colors: (
 primary:    #f9961e,
 secondary:  #882e2e,
 danger:     #f84e4e,
 light:      #f4f4f4,
 dark:       #222,
 newColor:   #000000,
);

そしてあなたのhtmlファイルで：

 <ion-item color='newColor'>
    Test
 </ion-item>
5
Ahmed Abuamra

実際に別の方法で動作しました：

.item-complex .item-content { background-color: #262B32 !important; }

@gylippusが示唆するとおり ここで投稿＃5

4
Kailas

回避策は、<a>タグの代わりに<ion-item>タグを使用することです。たとえば、<ion-item>を<a class="item">に変更し、必要なスタイルを設定します。

ソース： http://ionicframework.com/docs/components/#item-icons

1
Nghia Tran

Ionic3では、CSSの下でトリックを行います。

.item-ios {
background-color: transparent !important;
}
0
Keerthesh