如何将Ionic（＆gt; = 2）工具栏设置为与导航栏

Question

我有一个Ionic应用程序，我希望在导航栏中有一个工具栏，工具栏的背景颜色与导航栏的“顶部标题”部分不同。

我有以下标记......

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

还有一个示例plunk here

当然我想在sccs中这样做（而不是内联样式），但只是试图找到如何覆盖默认值。

我希望工具栏的颜色与下图中的颜色不同......

我使用

设置导航栏颜色

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

似乎在导航栏中设置了任何内容。

任何人都知道如何设置这个“辅助”工具栏？

提前感谢任何建议

Answer 1

Ionic way 这样做会包含$colors地图中的所有颜色，然后使用color组件的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>

在variable.scss文件中：

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

  //...

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

Answer 2

在css中存在一个类，您需要覆盖或更改类的样式。

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