Question

我有一个页脚，我想让它的背景色动态。我试图将元素绑定到类或给动态样式，但它不起作用。事件它没有采取风格。我在我的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

您通常会使用ngStyle或ngClass动态设置html元素的样式。但是ion-toolbar是离子2的自定义组件。查看toolbar colors文档。

尝试：

<ion-toolbar color="primary">

该属性从 variables.scss 中的colors地图中选择颜色。

向地图添加颜色。 $colors: (...toolbar-color:green)

并且做：

 <ion-toolbar [color]="colorStatus?'toolbar-color':'primary'">

Answer 2

您可以在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';
}

离子动态工具栏背景颜色

2 个答案: