我正在尝试在Ionic 2中更改导航栏的背景颜色。 我已经尝试了很多方法,比如使用class =“bar bar-stable”等。
现在我的代码看起来像这样:
<ion-navbar *navbar>
所以当前的背景色是灰色(默认)
我正在尝试在Ionic 2中更改导航栏的背景颜色。 我已经尝试了很多方法,比如使用class =“bar bar-stable”等。
现在我的代码看起来像这样:
<ion-navbar *navbar>
所以当前的背景色是灰色(默认)
.toolbar-background {
background-color: #0c60ee;
}
.theme-color {
background-color: ##009688 !important;
color: #ffffff;}
html:
<ion-nav-bar class="theme-color"><ion-nav-bar>
希望这对您有所帮助。
目前(rc4),正确的做法是更改/src/themes/variables.scss
文件,并添加:
$toolbar-background: blue;
$toolbar-background $toolbar-border-color $toolbar-text-color $toolbar-active-color $toolbar-inactive-color
。 - kosiara - Bartosz Kosarzycki<ion-header><ion-navbar color='primary'> ... </ion-navbar> </ion-header>
要更改侧边菜单工具栏的背景,请前往variables.scss文件并添加以下代码:
$toolbar-background: $primary;
<ion-navbar secondary *navbar>
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
favorite: #69BB7B
);
很遗憾的是,这在最新版本的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;
}
<ion-nav-bar primary></ion-nav-bar>
也可以是次要的,等等,或者来自scss的其他颜色。
color="custom-color"
。 - Pierrick Martellière