我如何在离子 4 中绑定离子按钮的背景颜色

Question

我需要ionic4中的动态彩色按钮。这是我的代码，但不起作用

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

Answer 1

您可以通过以下方式进行

离子 4

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

离子3

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

v3 中的现场演示

Answer 2

你可以这样使用：

变量.css

 --ion-color-btn: #ef5365;

在 home.page.scss 中创建类

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

在按钮中添加类后：

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

希望对你有帮助:)