问题描述
我有一个页脚,我想使其背景颜色动态化.我正在尝试将元素绑定到类或提供动态样式,但是它不起作用.事实是它没有采用样式.我的html中有这个样式.
I have a footer and I want to make its background color dynamic. I am trying to bind the element to a class or give dynamic styling but it is not working. Event it is not taking the style.I have this in my html.
<ion-footer align="center" style="height: 50px" *ngIf="visibility">
<ion-toolbar class="testing"> //or// <ion-toolbar style="background-color: lightgreen">
<ion-title>
.....
这是我的.scss中的
and this in my .scss
.toolbar-background.testing {
background-color: lightgreen;
color:white
}
//或
.testing {
background-color: lightgreen;
}
仅此方法有效,但我不知道如何使其动态化.
only this is working, but I do not know how to make it dynamic.
.toolbar-background {
background-color: lightgreen;
color:white
}
推荐答案
您可以将其与HTML中的以下代码一起使用:
You can have it work with this code in the HTML:
<ion-toolbar [color]="currentColor"></ion-toolbar>
在您的variables.scss文件中添加所需的颜色
Add your desired colors in your variables.scss file
$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"变量初始化为默认颜色
In your .ts file, you can initialize your "currentColor" variable to the default color
private currentColor: string
constructor() {
this.currentColor = 'light';
}
然后具有更改为深色的功能
And then have a function to change to the dark color
changeToDarkColor() {
this.currentColor = 'dark';
}
这篇关于离子动态工具栏背景色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!