如何更改 Ionic 2 中导航栏的背景颜色?

Posted

技术标签:

【中文标题】如何更改 Ionic 2 中导航栏的背景颜色?【英文标题】:How do I change the background color of the navbar in Ionic 2? 【发布时间】:2015-12-04 07:21:48 【问题描述】:

我正在尝试更改 Ionic 2 中的导航栏背景颜色。我尝试了很多东西,例如 class="bar bar-stable" 等

现在我的代码如下所示:

<ion-navbar  *navbar> 

所以背景目前是灰色的(默认)

【问题讨论】:

【参考方案1】:

从 ionic 2 开始,您可以在 src/theme/variables.scss 文件中添加自定义样式

然后在你想要的地方添加类

现在看看结果

参考:Theming your Ionic App

【讨论】:

这很好,但需要在所有 ion-nav 标签上加上color="custom-color" 下面@veljkoz的回答是比较方便的。【参考方案2】:

导航栏有自己的风格。所以你需要覆盖它。

.toolbar-background 
  background-color: #0c60ee;

【讨论】:

这应该是这个问题的正确答案。 这是有效的,但是当我尝试它时正在改变工具栏的文本颜色。 放这个最好的地方是什么?【参考方案3】:

对于离子 2:try this

在 ionic 1 中你可以这样做。 看这里:Ionic header

其他方式

css:

.theme-color 
background-color: ##009688 !important;
color: #ffffff;

html:

   <ion-nav-bar class="theme-color"><ion-nav-bar>

希望这对你有帮助。

【讨论】:

【参考方案4】:

现在 (rc4) 正确的方法是更改​​ /src/themes/variables.scss 文件,并添加:

$toolbar-background: blue;

这有效地改变了使用该值的任何地方的颜色。更多信息here

【讨论】:

其实toolbar还有很多其他属性,比如$toolbar-background $toolbar-border-color $toolbar-text-color $toolbar-active-color $toolbar-inactive-color【参考方案5】:

这行得通:

<ion-navbar secondary *navbar>

app/theme目录下的app.variables.scss中有一些预定义的变量:

 $colors: (
    primary:    #387ef5,
      secondary:  #32db64,
      danger:     #f53d3d,
      light:      #f4f4f4,
      dark:       #222,
      favorite:   #69BB7B
    );

我从以下文章中了解到这一点:A Guide to Styling an Ionic2 Application。

【讨论】:

【参考方案6】:

我通过在导航栏中使用如下颜色属性来找到标题的解决方案:

<ion-header><ion-navbar color='primary'> ... </ion-navbar> </ion-header>

对于侧边菜单工具栏背景,转到 variables.scss 文件并添加以下代码:

$toolbar-background: $primary;

【讨论】:

【参考方案7】:
<ion-nav-bar primary></ion-nav-bar>

也可以是次要的等,或者来自scss的其他颜色。

【讨论】:

谢谢丹,非常感谢!【参考方案8】:

不幸的是,这似乎不再适用于最新版本的 Ionic2(截至 2016 年 10 月 25 日 - ionic -version = 2.1.4),在 package.json 中有以下依赖项:

    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/compiler-cli": "0.6.2",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@ionic/storage": "1.0.3",
    "ionic-angular": "2.0.0-rc.1",
    "ionic-native": "2.2.3",

为了解决这个问题,我不得不将以下内容添加到app.scss

.toolbar-background 
  background-color: blue;

【讨论】:

以上是关于如何更改 Ionic 2 中导航栏的背景颜色?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Ionic 4 中更改标签栏和标签图标的背景颜色

我想更改 Bootstrap 导航栏的背景颜色。 [复制]

我不知道我在做啥错,我想在页面滚动时更改导航栏的背景颜色

如何在 Swift 中更改 TabBar 的颜色?图像作为导航栏中的背景?

更改导航栏背景颜色后,self.view 的 y 位置发生更改

如何使用swift3增加导航栏的高度并更改xcode 8中状态栏的颜色?