我添加了以下代码style =“background-color:#C2A5A5!”,但这对我来说没有效果,我如何添加背景颜色到ion-item?
<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>
解决方法
Ionic正在< ion-item>内注入元素给元素一个结构:
<ion-item> <div class="item-content"> </div> </ion-item>
Ionic CSS包含CSS属性:
.item-content { background-color:#ffffff; }
您添加的内联CSS正在应用于#ffffff背景元素后面的元素,因此您看不到背景颜色.
将背景颜色应用于.item-content元素,如通过将以下CSS添加到Ionic CSS文件而推荐的@ariestiyansyah,或创建自定义CSS文件并包含< link>在标题中,使用以下内容:
.item .item-content { background-color: transparent !important; }
这是working demo.