【问题标题】:Change NavBar color for all the pages in ionic更改 ionic 中所有页面的导航栏颜色
【发布时间】:2018-03-12 08:55:25
【问题描述】:

我是 ionic 新手,想学习它。我的问题是如何更改 ionic 3 中所有页面的导航栏颜色。

我一直在使用以下代码

<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Hello Ionic</ion-title>
  </ion-navbar>
</ion-header>

有什么办法可以改变所有页面的导航栏颜色,而不是手动做&lt;ion-navbar color="primary"&gt;

【问题讨论】:

    标签: ionic-framework ionic3 navbar


    【解决方案1】:

    在 variables.scss 文件中添加以下行以全局更改颜色。

    $toolbar-background: #3D9BDD;
    

    【讨论】:

    • 如何改变导航栏文字颜色?
    • 在我的例子中,此参数还将文本 color 设置为背景颜色。两个属性具有相同的颜色。 backgroundcolor。结果是不可见的文本。如果未设置组件的颜色。 -.- 是否还有文本颜色变量?顺便提一句。没有关于此的文档。我必须检查来源。好的,我找到了$toolbar-text-color。但未测试。就我而言,有些事情很奇怪。 ...
    【解决方案2】:

    这可以实现不同的方式,我将向您展示两种方式

    第一种方式

    variables.scss 文件 $colors 部分添加 customColor

    $colors: (
      primary:    #488aff,
      secondary:  #32db64,
      danger:     #f53d3d,
      light:      #f4f4f4,
      dark:       #222,
      customColor:(
        base: #00953B,
        contrast: #ffffff
      )
    );
    

    这里的底色是背景色,对比度是文本色

    并在 .html 文件中进行更改

    <ion-header>
      <ion-navbar color="customColor">
        <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>Hello Ionic</ion-title>
      </ion-navbar>
    </ion-header>
    

    第二种方式

    覆盖默认颜色工具栏颜色

    $toolbar-background: #00953B;
    

    【讨论】:

      【解决方案3】:

      如果有人正在寻找使用动态主题的解决方案,则可以在 Ionic 3 中使用 css 更改文本颜色:

      .header .toolbar-title {
          color: #fff !important;
      }
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2017-01-05
        • 1970-01-01
        • 2021-06-19
        • 2019-11-13
        • 1970-01-01
        • 1970-01-01
        • 2018-02-06
        相关资源
        最近更新 更多