如何更改 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 中导航栏的背景颜色?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Swift 中更改 TabBar 的颜色?图像作为导航栏中的背景?