如何使用ionic-v4在ion-fab-button中添加动态背景色？

Question

我正在使用ionic 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 Us Saqib的输出答案：

Answer 1

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

但是，当我尝试使用[ngstyle]时，它不起作用，要使其起作用，我必须通过CSS文件分配它。我添加了一个示例供您参考。

HTML模板

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

CSS块

#btn继续{ --ion-color-base：＃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”