css - ionic 动态工具栏背景颜色

Question

我有一个页脚，我想让它的背景颜色动态化。我正在尝试将元素绑定(bind)到一个类或提供动态样式，但它不起作用。事件它没有采用样式。我的 html 中有这个。

<ion-footer align="center" style="height: 50px" *ngIf="visibility">
  <ion-toolbar class="testing"> //or// <ion-toolbar style="background-color: lightgreen">
    <ion-title>
      .....

这在我的 .scss 中

.toolbar-background.testing {
  background-color: lightgreen;
  color:white
}

//或

.testing {
  background-color: lightgreen;
}

只有这个有效，但我不知道如何使它动态。

.toolbar-background {
  background-color: lightgreen;
  color:white
}

Answer 1

您可以让它在 HTML 中使用此代码:

<ion-toolbar [color]="currentColor"></ion-toolbar>

在 variables.scss 文件中添加您想要的颜色

$colors: (
   blue:    #387ef5,
   secondary:  #32db64,
   danger:     #f53d3d,
   light:      #f4f4f4,  // the light color we're using
   dark:          #222   // the dark color we're using
);

在您的 .ts 文件中，您可以将“currentColor”变量初始化为默认颜色

private currentColor: string

constructor() {
    this.currentColor = 'light';
}

然后有一个变暗的功能

changeToDarkColor() {
    this.currentColor = 'dark';
}