我有一个页脚,我想让它的背景色动态。我试图将元素绑定到类或给动态样式,但它不起作用。事件它没有采取风格。我在我的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
}
答案 0 :(得分:2)
您通常会使用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'">
答案 1 :(得分: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';
}