web-dev-qa-db-fra.com

Changer la couleur de fond de ion ion-item en CSS

J'ai ajouté le code suivant style="background-color: #C2A5A5 !important. Mais cela n'a pas fonctionné pour moi. Comment puis-je ajouter une couleur de fond à ion-item? Merci d'avance.

<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
12
Rajitha Perera

Ionic injecte un élément dans le <ion-item> en lui donnant la structure suivante:

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

Ionic CSS contient une propriété CSS:

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

Le CSS en ligne que vous avez ajouté est appliqué à l'élément derrière l'élément avec l'arrière-plan #ffffff; vous ne pouvez donc pas voir la couleur de l'arrière-plan.

Appliquez la couleur d'arrière-plan à l'élément .item-content, comme @ariestiyansyah recommandé en ajoutant le fichier CSS suivant au fichier CSS ionique, ou créez un fichier CSS personnalisé et incluez-y un <link> dans l'en-tête.

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

Voici la démo de travail .

22
Brett DeWoody

En fait, cela fonctionne d'une manière différente:

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

comme suggéré par @gylippus ici dans le post # 5

3
Kailas

Une solution de contournement consiste à utiliser la balise <a> au lieu de la balise <ion-item>, par exemple: remplacez <ion-item> par <a class="item">, puis appliquez le style souhaité.

Source: http://ionicframework.com/docs/components/#item-icons

1
Nghia Tran

Dans Ionic3, ci-dessous css fera l'affaire.

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

Utilisez simplement les couleurs dans le fichier variables.scss (vous pouvez également définir de nouvelles couleurs) comme cela

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

et dans votre fichier html:

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