Comment puis-je changer la couleur de fond de la barre de navigation Ionique dans les 2?

Je suis en train de changer la barre de navigation couleur d'arrière-plan dans Ionique 2. J'ai essayé beaucoup de choses, comme class="bar bar-stable", etc

Droit maintenant, mon code ressemble à ceci:

<ion-navbar  *navbar>

Afin que l'arrière plan est actuellement en gris (par défaut)

InformationsquelleAutor Tyler Ruby | 2015-12-04

9

de ionique 2, vous pouvez ajouter un style personnalisé dans votre répertoire src/thème/les variables.scss fichier

Puis ajouter la classe dans laquelle vous voulez

Maintenant voir le résultat

Référence : Thématisation Ionique App
- C'est bon, mais requiert de mettre color="custom-color" sur tous les ions nav balises.
- La réponse de @veljkoz ci-dessous est la plus commode.
InformationsquelleAutor Sanjoy Kanrar
7

La barre de navigation a ses propres styles. SI vous avez besoin de le remplacer.
```
.toolbar-background {
  background-color: #0c60ee;
}
```
- Cela devrait être la bonne réponse à cette question.
- C'est un travail, mais est en train de changer la barre d'outils de la couleur du texte quand je suis en train de l'essayer.
- Quel est le meilleur endroit pour mettre cela?
InformationsquelleAutor CESCO
4

Pour Ionique 2 : essayez ceci

ionique, 1 u peut le faire de cette façon.
regardez ici:Ionique-tête

autre façon

css :
```
.theme-color {
background-color: ##009688 !important;
color: #ffffff;}
```
html:
```
   <ion-nav-bar class="theme-color"><ion-nav-bar>
```
espère que cette utile pour vous.

InformationsquelleAutor the_mahasagar
3

Droit maintenant (rc4) la bonne façon de le faire est de changer le /src/themes/variables.scss fichier, et d'ajouter:
```
$toolbar-background: blue;
```
Effectivement cela change la couleur de l'endroit où la valeur est utilisée. Plus d'infos ici
- En fait, il ya beaucoup de d'autres propriétés de la barre d'outils, c'est à dire $toolbar-background $toolbar-border-color $toolbar-text-color $toolbar-active-color $toolbar-inactive-color
- Ce doit être la accepté de répondre.
InformationsquelleAutor veljkoz
1

Cela fonctionne:
```
<ion-navbar secondary *navbar>
```
Il y a quelques variables prédéfinies dans l'app.les variables.scss dans le dossier app/répertoire de thème:
```
 $colors: (
    primary:    #387ef5,
      secondary:  #32db64,
      danger:     #f53d3d,
      light:      #f4f4f4,
      dark:       #222,
      favorite:   #69BB7B
    );
```
J'ai pensé que cela à partir de l'article suivant: Un Guide de Style un Ionic2 Application.

InformationsquelleAutor srihari
1

que je trouve une solution pour l'en-tête en utilisant l'attribut de couleur comme suit dans la barre de navigation :
```
<ion-header><ion-navbar color='primary'> ... </ion-navbar> </ion-header>
```
pour le menu de la barre d'outils de fond, aller à des variables.scss fichier et ajoutez ce code :
```
$toolbar-background: $primary;
```
InformationsquelleAutor Monty Al Mohaisen
0
```
<ion-nav-bar primary></ion-nav-bar>
```
Pourrait également être secondaire, etc, ou d'autres couleurs à partir de la scss.
- Merci Dan, je l'apprécie!
InformationsquelleAutor Dan Bucholtz

Malheureusement, cela ne semble plus de travail dans la dernière version de Ionic2 (comme de 10/25/16 - ionic -version = 2.1.4) avec les dépendances suivantes dans le paquet.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",

À résoudre, ce que j'avais à ajouter les éléments suivants à app.scss:

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

InformationsquelleAutor Russ

0

Voici une réponse que j'ai trouvé sur le ionic2 forum et cela a fonctionné pour moi:

Modifier barre de navigation en-tête de couleur de fond Ionique 2:
https://forum.ionicframework.com/t/change-navbar-header-background-colour-ionic-2/48498

InformationsquelleAutor Spilot

Vous devez vous connecter pour publier un commentaire.