离子动态工具栏背景颜色

时间:2017-05-11 08:21:26

标签: css ionic2

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

2 个答案:

答案 0 :(得分:2)

您通常会使用ngStylengClass动态设置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';
}