Ionic Dynamic Toolbar Background Color

问题:

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>       ..... 

and this in my .scss

.toolbar-background.testing {   background-color: lightgreen;   color:white } 

//or

.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 } 

回答1:

You can have it work with this code in the HTML:

<ion-toolbar [color]="currentColor"></ion-toolbar> 

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 ); 

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'; }  

回答2:

You would generally use ngStyle or ngClass to dynamically set styles for html elements. However ion-toolbar is a custom component of ionic 2. Check toolbar colors docs.

Try:

<ion-toolbar color="primary"> 

The attribute picks the color from the colors map in variables.scss.

Add a color to the map. $colors: (...toolbar-color:green)

and do:

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

文章来源: Ionic Dynamic Toolbar Background Color