本文介绍了离子动态工具栏背景色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个页脚,我想使其背景颜色动态化.我正在尝试将元素绑定到类或提供动态样式,但是它不起作用.事实是它没有采用样式.我的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';
}

这篇关于离子动态工具栏背景色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-22 16:14
查看更多