Clever Geek Handbook

How to set Ionic (> = 2) toolbar to a different background color than navigation

I have an Ionic app where I would like to have a toolbar in the navigation bar where the toolbar has a different background color in the "top title" section of the navigation bar.

I have the following markup ...

    <ion-header>

      <ion-navbar>      
        <ion-title>Main header</ion-title>       
      </ion-navbar>  

      <ion-toolbar style='background-color:green'> 
        <ion-title >Subheader</ion-title>    
      </ion-toolbar>

    </ion-header>

and also plunk example here

Of course I would like to do this in sccs (not inline style), but just trying to find how to override the default.

I would like the toolbar to be a different color like in the image below ...

enter image description here

I set navbar color with

.toolbar-background{
    background-color: color($colors, secondary-lite);
  }

which seems to set anything in the navbar.

Does anyone know how I can just install this "secondary" toolbar?

Thanks in advance for any suggestions

+3


source to share


2 answers


The ionic way to do this is to include all the colors in the map $colors

and then use the color

component attribute ion-toolbar

:

<ion-header>

  <ion-navbar color="custom-blue">      
    <ion-title>Main header</ion-title>       
  </ion-navbar>  

  <ion-toolbar color="custom-green"> 
    <ion-title>Subheader</ion-title>    
  </ion-toolbar>

</ion-header>


And in your file variable.scss

:

$colors: (
  primary:    #01579b,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,

  //...

  custom-blue:   #0277bd,
  custom-green:  #008c00
);
+2


source


there is a class in css and you need to overwrite or change the style of the class.



.toolbar-background-md {
    border-color: #b2b2b2;
    background: #f8f8f8;
}
0


source






More articles:


All Articles