5
votes

Comment puis-je lier la couleur de fond du bouton ionique dans ionic 4

J'ai besoin d'un bouton coloré dynamique dans ionic4. Ceci est mon code, mais ne fonctionne pas

<ion-button [style.--background]="colorVarialble">Buttton</ion-button>

ionic4 bind

0 commentaires

3 Réponses :

7
votes

Vous pouvez le faire de la manière suivante

IONIC 4

<button ion-button [ngStyle]="{'background-color':'red'}">Butttons</button> //replace your color

IONIC 3

XXX

Démo en direct dans la v3

3 commentaires

Merci pour votre aide, Dans mon cas, le colorVarialble est dynamique, n'est pas dénombrable . par exemple, '# 000011', '# 992233', etc.

J'ai besoin d'utiliser la variable à la place rouge

Salut, j'ai donné color = "", cela fonctionne très bien. Mais lorsque je clique sur le bouton, il devient de couleur blanche (se concentre dessus). Lorsque je tape à l'extérieur, il revient au bouton normal.

4
votes

Vous pouvez utiliser comme ceci:

variables.css

<ion-button shape="round" class="btncolor">
  Get Started
</ion-button>

créer une classe dans votre home.page.scss

.btncolor {
  --background: var(--ion-color-btn);
}

0 commentaires

2
votes

Vous pouvez également le faire comme ceci:

ion-button {
--background: #e95e28;
}

1 commentaires

Ce n'est pas dynamique