如何使用离子-v4在离子按钮中添加动态背景色？

Question

我使用的离子4 fab按钮，在fab按钮，我想设置一个动态背景颜色。

下面是示例代码：

page.html

<!-- fab placed to the bottom end -->
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
  <ion-fab-button [style.background.color]="currentColor" [style.color]="isColorLight(currentColor) ? 'black' : 'white'"
    size="small">
    <ion-icon name="color-palette"></ion-icon>
  </ion-fab-button>
  <ion-fab-list side="top">
    <ion-fab-button (click)="switchColor(i)" [style.background.color]="colors[i]"
      *ngFor="let color of colors; let i = index">
    </ion-fab-button>
  </ion-fab-list>
</ion-fab>

page.ts

colors: string[] = ['#000000', '#db0f0f', '#0fbf0f', '#35a3e8', '#FFFFFF'];
currentColor: string = this.colors[0];
::
::
switchColor(index: number) {
  this.currentColor = this.colors[index];
}

另外，我尝试了[style.background-color]="currentColor"，但它不起作用。

“Najam”的输出回答：

​

​

Answer 1

它的颜色由其--ion-color-base属性控制。因此，请尝试使用--ion-color-base和!important属性来覆盖已经定义的CSS属性。

但是，当我尝试使用[ngstyle]时，它没有工作，为了让它工作，我不得不通过CSS文件分配它。我增加了一个例子供你参考。

HTML模板，

<ion-fab-button color="light"  id="btnProceed"></ion-fab-button>

CSS块

#btnProceed {-离子色基：#006161！重要；}

希望这能帮上忙。

Answer 2

使用ngStyle属性。

<ion-fab vertical="bottom" horizontal="start" slot="fixed">
  <ion-fab-button [ngStyle]="{'background': currentColor}" [style.color]="isColorLight(currentColor) ? 'black' : 'white'"
    size="small">
    <ion-icon name="color-palette"></ion-icon>
  </ion-fab-button>
  <ion-fab-list side="top">
    <ion-fab-button (click)="switchColor(i)" [ngStyle]="{'background': currentColor}"
      *ngFor="let color of colors; let i = index">
    </ion-fab-button>
  </ion-fab-list>
</ion-fab>

Answer 3

您可以尝试“背景”，而不是像这样的“背景颜色”：

style.background="currentColor“