更改颜色导航栏标题Ionic 2 [英] Change colour navbar header Ionic 2

问题描述

我有这个问题...我的颜色现在是白色的，我的代码是这样的：

I have this problem... My colour is white right now, my code is like this:

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

使用此选项更改颜色很容易（主要，次要，危险，光明，黑暗）

Change color with this opcion is easy (primary, secondary, danger, light, dark)

<ion-header >
      <ion-navbar danger>
        <ion-title>
          HELLO
        </ion-title>
      </ion-navbar>
 </ion-header>

但我的问题是当我想使用自定义颜色时。
有人知道如何解决它？
谢谢inadvance。

but my problem is when I want to use custom colors. Somebody know how can I resolve it? Thanks inadvance.

祝你好运。

推荐答案

根据您是否只想在一个页面中更改颜色，或者您想要在应用程序的所有页面中更改颜色，有两种方法可以执行此操作：

There're two ways of doing this, based on if you want to change the color only in a single page, or if you want to change it in all the pages from your app:

就像你可以看到这里

要更改主题，只需调整即可你的
src / theme / variables.scss 文件中的 $ colors 地图：

$colors: (
  // ...
  newcolor:    #55acee

)

然后在视图中使用它

 <ion-header>
      <ion-navbar color="newcolor">
        <ion-title>
          HELLO
        </ion-title>
      </ion-navbar>
 </ion-header>

2）在所有页面/视图中更改

在这种情况下，您需要在 variables.scss 文件中添加以下内容以覆盖Ionic的默认值：

2) Change it in all the pages/views

In this case, you'd need to add the following in your variables.scss file to override Ionic's defaults:

$toolbar-ios-background: #55acee;
$toolbar-md-background: #55acee;
$toolbar-wp-background: #55acee;

---

编辑

---

Edit

您好，如何在app / theme / app.variables.scss中添加渐变？

Hi, how can I add gradient in app/theme/app.variables.scss?

您可以在 src / theme / variables.scss 中添加您将要使用的颜色：

You could add the colors that you're going to use in the src/theme/variables.scss:

$header-first-color: #AAAAAA;
$header-last-color: #000000;

然后设置规则以使用它（在 app.scss <中/ code>文件，如果要将其应用于每个页面，或者在 page-name.scss 文件中，如果要将其应用于单个页面） ：

And then set a rule to use it (in your app.scss file if you want to apply it to every page, or in the page-name.scss file if you want to apply it to a single page):

ion-header {
    .toolbar-background {
        background: linear-gradient(135deg, $header-first-color 0%, $header-last-color 100%);
    }
}

这篇关于更改颜色导航栏标题Ionic 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！