如何将 Ionic (>=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 方式是在$colors 映射中包含所有颜色，然后使用ion-toolbar 组件的color 属性：

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