ionic 4从api动态更改工具栏背景颜色 [英] ionic 4 change toolbar background color Dynamically from api get

问题描述

我正在尝试通过从API获取的颜色来更新工具栏的背景颜色.我可以将颜色完美地应用到应用中.

I am trying to update the toolbar background color via color I am getting from API. I can call the color into app perfectly fine.

{ acf: { tob_bar_color: "#dd003b" } }

{ acf: { tob_bar_color: "#dd003b" } }

我正在尝试获得这样的背景色:

I am trying to get background color like this:

<ion-toolbar [ngStyle]="{'background':styles?.acf.tob_bar_color}">

当我检查元素时，它显示它添加了style="background: #dd003b;"，但它仍然不会更改背景色.在检查器中，如果我在背景前面添加-"，如下所示:style="--background: #dd003b;"它会更新应用程序，但这仅在检查器中.但是

When I inspect element, it shows it adds a style="background: #dd003b;" but it still wont change background color. In the inspector if I add '--' in front of background like this: style="--background: #dd003b;" it does update the app, but that is only in inspector. But

推荐答案

理想情况下，您应该通过以下方式添加客户颜色: https://ionicframework.com/docs/theming/colors#adding-colors

Ideally you should add your customer colors this way: https://ionicframework.com/docs/theming/colors#adding-colors

具体使用该文章中的此颜色生成器: https://ionicframework.com/docs/theming/colors#new-color-创作者

Specifically use this color generator from that article: https://ionicframework.com/docs/theming/colors#new-color-creator

现在进入应用程序的文件夹theme \ variable.scss并添加新颜色.在下面，我添加了4种颜色，并将它们命名为color_a，color_b，color_c，color_d.您可以根据需要添加任意数量:

Now go into your app's folder theme\variable.scss and add new colors. Below I added 4 colors and named them color_a, color_b, color_c, color_d. You can add as many as you like:

variables.scss:

variables.scss:

:root {
  /** primary **/
  --ion-color-primary: #488aff;
  --ion-color-primary-rgb: 72,138,255;
  --ion-color-primary-contrast: #fff;
  --ion-color-primary-contrast-rgb: 255,255,255;
  --ion-color-primary-shade: #3f79e0;
  --ion-color-primary-tint: #5a96ff;

  /** custom **/
  --ion-color-color_a: #111111;
  --ion-color-color_a-rgb: 17,17,17;
  --ion-color-color_a-contrast: #ffffff;
  --ion-color-color_a-contrast-rgb: 255,255,255;
  --ion-color-color_a-shade: #0f0f0f;
  --ion-color-color_a-tint: #292929;

  --ion-color-color_b: #333333;
  --ion-color-color_b-rgb: 51,51,51;
  --ion-color-color_b-contrast: #ffffff;
  --ion-color-color_b-contrast-rgb: 255,255,255;
  --ion-color-color_b-shade: #2d2d2d;
  --ion-color-color_b-tint: #474747;

  --ion-color-color_c: #555555;
  --ion-color-color_c-rgb: 85,85,85;
  --ion-color-color_c-contrast: #ffffff;
  --ion-color-color_c-contrast-rgb: 255,255,255;
  --ion-color-color_c-shade: #4b4b4b;
  --ion-color-color_c-tint: #666666;

  --ion-color-color_d: #777777;
  --ion-color-color_d-rgb: 119,119,119;
  --ion-color-color_d-contrast: #ffffff;
  --ion-color-color_d-contrast-rgb: 255,255,255;
  --ion-color-color_d-shade: #696969;
  --ion-color-color_d-tint: #858585;

}

.ion-color-color_a {
  --ion-color-base: var(--ion-color-color_a);
  --ion-color-base-rgb: var(--ion-color-color_a-rgb);
  --ion-color-contrast: var(--ion-color-color_a-contrast);
  --ion-color-contrast-rgb: var(--ion-color-color_a-contrast-rgb);
  --ion-color-shade: var(--ion-color-color_a-shade);
  --ion-color-tint: var(--ion-color-color_a-tint);
}

.ion-color-color_b {
  --ion-color-base: var(--ion-color-color_b);
  --ion-color-base-rgb: var(--ion-color-color_b-rgb);
  --ion-color-contrast: var(--ion-color-color_b-contrast);
  --ion-color-contrast-rgb: var(--ion-color-color_b-contrast-rgb);
  --ion-color-shade: var(--ion-color-color_b-shade);
  --ion-color-tint: var(--ion-color-color_b-tint);
}

.ion-color-color_c {
  --ion-color-base: var(--ion-color-color_c);
  --ion-color-base-rgb: var(--ion-color-color_c-rgb);
  --ion-color-contrast: var(--ion-color-color_c-contrast);
  --ion-color-contrast-rgb: var(--ion-color-color_c-contrast-rgb);
  --ion-color-shade: var(--ion-color-color_c-shade);
  --ion-color-tint: var(--ion-color-color_c-tint);
}

.ion-color-color_d {
  --ion-color-base: var(--ion-color-color_d);
  --ion-color-base-rgb: var(--ion-color-color_d-rgb);
  --ion-color-contrast: var(--ion-color-color_d-contrast);
  --ion-color-contrast-rgb: var(--ion-color-color_d-contrast-rgb);
  --ion-color-shade: var(--ion-color-color_d-shade);
  --ion-color-tint: var(--ion-color-color_d-tint);
}

一旦颜色成为应用程序css的一部分，您就可以在html模板中执行以下操作:

Once your colors are part of the app's css you could do something like this in your html template:

<ion-header>
    <ion-toolbar [color]="dynamicColor? dynamicColor:'primary'">
        <ion-title>
            Ionic 4 template
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content padding>

  <ion-button (click)="updateColor('color_a')" color="color_a">Update Color with color A</ion-button>

  <ion-button (click)="updateColor('color_b')" color="color_b">Update Color with color B</ion-button>

  <ion-button (click)="updateColor('color_c')" color="color_c">Update Color with color C</ion-button>  

  <ion-button (click)="updateColor('color_d')" color="color_d">Update Color with color D</ion-button> 

</ion-content>

然后在ts文件中，您可以最初拥有未定义的颜色变量，然后从API或通过按钮动态获取其值:

Then in your ts file you can have initially undefined color var, which then gets its value dynamically from an API or via button:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.css'],
})
export class HomePage {

  dynamicColor: string;

  updateColor(color) {
    this.dynamicColor = color;
  }

}

这是堆叠闪电战: https://stackblitz.com/edit/ionic-4-template-idsm2c

因此，如果您的API动态返回一个颜色值(#323242)，则您可以在ts文件中拥有一个颜色图，该颜色图会将其映射为特定的scss颜色(color_a等)，因此您可以为ion-工具栏或按钮等

So if your API returns dynamically a color value (#323242) you can have a color map in your ts file that would map it into specific scss color (color_a etc) and thus you can make this dynamic color update for ion-toolbar or buttons etc

这篇关于ionic 4从api动态更改工具栏背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！