web-dev-qa-db-fra.com

Changer la couleur d'arrière-plan de l'élément ionique en Ionic 4.0

Bonne journée à tous

J'espère que personne ne l'a encore demandé ... J'ai trouvé des articles similaires comme celui-ci , mais cela ne fonctionne pas pour Ionic 4.0. Ce qu'ils suggèrent ici ne semble pas fonctionner pour moi, car Ionic 4.0 ne semble pas injecter la même chose

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

élément discuté dans le post lié.

J'ai du mal à changer la couleur de fond d'un élément ionique Ionic 4.0. J'essaie de lui donner un fond blanc tandis que l'application a un fond bleu.

Je peux voir dans l'inspecteur de code qu'il applique mon style, mais il n'apparaît pas dans le navigateur.

Voici un exemple de mon code:

<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;
}

Ci-dessous, une capture d'écran de ce que je regarde, qui montre que l'élément (la barre de recherche) reçoit le style, mais ne l'implémente pas ou ne le montre pas.

enter image description here

Tout avis serait grandement apprécié.

htmlcssionic-frameworksass
16
phunder

Utilisez cette règle CSS ionic CSS:

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

J'ai trouvé celui qui fonctionnait dans ionic 4. Appliquez les 2 css ci-dessous dans votre fichier .scss où vous avez implémenté ion-list et ion-item:

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

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

Il me semble avoir trouvé une solution. Vous avez juste besoin d'ajouter color = "light" à l'élément ion-item. Veuillez voir ci-dessous:

<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>

Le problème est que d'autres codes sont injectés en fonction de mon thème, que j'ai défini sur ma couleur principale à partir de mes variables, donc je dois indiquer que j'utilise à nouveau le thème léger (que j'avais déjà configuré pour être #fff dans mes variables ).

J'espère que cela aidera quelqu'un à l'avenir :)

2
phunder

Si vous souhaitez modifier la couleur d'arrière-plan de plusieurs éléments dans

 <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

Aucune des réponses n'a fonctionné pour moi complètement bien que @ réponse labago fonctionne partiellement.

--ion-background-color ne fonctionne que pour le contenu statique sans remplissage ni marge. Dès que je commence à appliquer le rembourrage, il ne donne pas les résultats escomptés, voici donc la solution de contournement que j'ai utilisée dans mon application:

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

Cela fonctionne pour ionic 4

1 - Ouvrir le fichier: src/theme/variables.scss 2 - insérer la couleur du code:

  /** 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 correspond à la couleur transparente

2 - ouvrez le fichier global.scss et insérez le code:

.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 - Appelez la couleur transparente dans l'élément ionique

<ion-item color="transparent">

</ion-item>
1
Edvan Souza