Блог

Главная - Вопросы по программированию - Как я могу привязать цвет фона ion-кнопки в ionic 4

Как я могу привязать цвет фона ion-кнопки в ionic 4

#bind #ionic4

#привязать #ionic4

Вопрос:

Мне нужна динамическая цветная кнопка в ionic4. Это мой код, но он не работает

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

Ответ №1:

Вы можете сделать следующим образом

IONIC 4 

   <ion-button style="--background:red">Red</ion-button> // replace your color

IONIC 3

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

Живая демонстрация в версии v3

Комментарии:

1. Спасибо за вашу помощь, в моем случае colorVarialble является динамическим, не поддается счету . например, ‘#000011’, ‘#992233’, и т.д.

2. Мне нужно использовать переменную вместо красного

3. Привет, я указал color =»<name>», он отлично работает. Но когда я нажимаю на кнопку, она становится белого цвета (фокусируется на ней). Когда я нажимаю снаружи, он возвращается к обычной кнопке.

Ответ №2:

Вы можете использовать следующим образом:

переменные.css

  --ion-color-btn: #ef5365;

создайте класс у себя на домашней странице.scss

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

и после добавления класса в вашу кнопку:

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

надеюсь, это поможет вам 🙂

Ответ №3:

Вы также могли бы просто сделать это следующим образом:

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

Комментарии:

1. Это не является динамическим