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

sxpgvts3 于 2022-12-16 发布在 Ionic

关注(0)|答案(5)|浏览(154)

我使用的是离子4晶圆厂按钮，在晶圆厂按钮我想设置一个动态背景色。
下面是示例代码：
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的输出回答：

ionic-framework

来源：https://stackoverflow.com/questions/58969099/how-to-add-dynamic-background-color-in-ion-fab-button-using-ionic-v4

5条答案

按热度按时间

esbemjvw1#

如果有人看到这一点，我也遇到了同样的问题，并通过添加[style]属性（带有ionic定义的属性--background）成功地动态更改了颜色：

<ion-fab-button
  [style.--background]="config.yourColor">
</ion-fab-button>

赞(0）回复(0）举报 2022-12-16

xxhby3vn2#

这里我们需要更改阴影DOM的背景色，这很难操作。
为此，Ionic使用CSS属性对这个阴影DOM进行样式化，这些属性可以很容易地进行更改

在CSS中

ion-fab-button {
    --background: #7c3aed
}

在JS中（动态）

<IonFabButton style={{ '--background': yourColor }} />;

赞(0）回复(0）举报 2022-12-16

5t7ly7z53#

的Color由其--ion-color-base属性控制。因此，请尝试同时使用--ion-color-base和!important属性来重写已定义的CSS属性。
但是当我尝试使用[ngstyle]时它不起作用，为了让它起作用，我不得不通过CSS文件分配它。我添加了一个示例供您参考。
HTML模板，

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

CSS块

btn继续{ --离子-颜色-基色：#006161！重要;}

希望这个能帮上忙。

赞(0）回复(0）举报 2022-12-16

piztneat4#

使用[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>

赞(0）回复(0）举报 2022-12-16

shyt4zoc5#

您可以尝试使用“background”而不是“background-color”，如下所示：
[样式背景]=“当前颜色”

赞(0）回复(0）举报 2022-12-16