Come cambio il colore di sfondo della barra di navigazione in Ionic 2?

Question

sto cercando di cambiare il colore di sfondo barra di navigazione in ionico 2. Ho provato molte cose, come la class = "bar bar-stabile" ecc

questo momento il mio codice simile a questo:

<ion-navbar *navbar> 

Così lo sfondo è attualmente grigia (default)

Answer 1

Per ionico 2: try this

in ionica 1 u può fare in questo modo. un'occhiata qui: Ionic header

altro modo

css:

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

html:

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

speranza questo utile a voi.

Answer 2

Questo funziona:

<ion-navbar secondary *navbar> 

Ci sono alcune variabili predefinite in app.variables.scss nella cartella app/tema:

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

Ho pensato che questo dal seguente articolo: A Guide to Styling an Ionic2 Application.

Answer 3

La barra di navigazione ha i propri stili. Quindi è necessario sovrascriverlo.

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

Answer 4

<ion-nav-bar primary></ion-nav-bar> 

potrebbe anche essere secondario, ecc, o altri colori dalla SCSS.

Answer 5

Purtroppo, questo sembra non funzionare nella sua ultima versione di Ionic2 (a partire dal 10/25/16 - ionic -version = 2.1.4) con le seguenti dipendenze in 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", 

To risolvere, questo ho dovuto aggiungere quanto segue app.scss:

.toolbar-background { 
    background-color: blue; 
} 

Answer 6

da ionica 2 è possibile aggiungere stile personalizzato nei tuoi src/a tema/variabili.file di SCSS

E poi aggiungere la classe in cui si desidera

ora vedere il risultato

Riferimento: Theming your Ionic App

Answer 7

In questo momento (RC4) il modo corretto per farlo è quello di modificare il file /src/themes/variables.scss, e aggiungere:

$toolbar-background: blue; 

questo cambia in modo efficace il colore per ovunque viene utilizzato il valore. Maggiori informazioni here

Answer 8

Ecco una risposta che ho trovato sul forum ionic2 e ha funzionato per me:

Cambia Colore intestazione barra di navigazione di sfondo ionico 2: https://forum.ionicframework.com/t/change-navbar-header-background-colour-ionic-2/48498

Answer 9

trovo soluzione per l'intestazione utilizzando attributo di colore come il seguente nella barra di navigazione:

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

per il menu laterale della barra degli strumenti di fondo, andare su File variables.scss e aggiungere questo codice:

$toolbar-background: $primary;