web-dev-qa-db-fra.com

Comment changer la couleur de fond de la barre de navigation dans Ionic 2?

J'essaie de changer la couleur de fond de la barre de navigation dans Ionic 2. J'ai essayé beaucoup de choses, comme class = "bar bar-stable", etc.

En ce moment, mon code ressemble à ceci:

<ion-navbar  *navbar>

Donc, le fond est actuellement gris (par défaut)

cordovamobileionic-frameworkionicionic2
7
Tyler Ruby

depuis ionic 2, vous pouvez ajouter un style personnalisé dans votre fichier src/theme/variables.scss

 enter image description here

Et puis ajoutez la classe où vous voulez

 enter image description here

 enter image description here

Maintenant voir le résultat

 enter image description here

Référence: Theming votre application ionique

9
Sanjoy Kanrar

La barre de navigation a ses propres styles. SO vous devez l'écraser.

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

Pour Ionic 2: essayez ceci

dans ionique 1 vous pouvez faire de cette façon. regardez ici: Ionic header

autre manière

css:

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

html:

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

j'espère que cela vous sera utile.

4
the_mahasagar

Pour le moment (rc4), la bonne façon de faire est de changer le fichier /src/themes/variables.scss et d'ajouter:

$toolbar-background: blue;

Cela change effectivement la couleur pour chaque fois que la valeur est utilisée. Plus d'infos ici

3
veljkoz

je trouve la solution pour l'en-tête en utilisant l'attribut color comme suit dans la barre de navigation:

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

pour l'arrière-plan de la barre d'outils du menu latéral, accédez au fichier variables.scss et ajoutez le code suivant:

$toolbar-background: $primary;
1
Montr Mohesen

Cela marche:

<ion-navbar secondary *navbar>

App.variables.scss contient des variables prédéfinies dans le répertoire app/theme:

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

Je figurais ceci dans l'article suivant: Guide sur le style d'une application Ionic2 .

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

Pourrait également être secondaire, etc., ou d'autres couleurs de la scss.

0
Dan Bucholtz

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

Changer la couleur d'arrière-plan de l'en-tête de la barre de navigation Ionic 2: https://forum.ionicframework.com/t/change-navbar-header-background-colour-ionic-2/48498

0
Spilot

Malheureusement, cela ne semble plus fonctionner dans la dernière version de Ionic2 (à partir du 10/10/16 - ionic -version = 2.1.4) avec les dépendances suivantes dans 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",

Pour résoudre ce problème, je devais ajouter ce qui suit à app.scss:

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