如何将Ionic（> = 2）工具栏设置为与导航栏不同的背景色

peterc 发表于 Dev

彼得

我有一个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>

还有一个例子在这里

当然，我想在sccs中进行此操作（而不是内联样式），但只是尝试查找如何覆盖默认值。

我希望工具栏具有不同的颜色，如下图所示...

我使用设置导航栏颜色

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

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

有人知道我该如何设置这个“辅助”工具栏？

在此先感谢您的任何建议

塞巴费雷拉斯

使用Ionic的方法是在$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
);

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。