web-dev-qa-db-fra.com

Comment changer la couleur d'arrière-plan de l'ion-header en ionic 2?

Comment changer la couleur de l'en-tête? J'ai essayé ci-dessous mais je n'ai pas réussi

 <ion-header>
  <ion-navbar danger>
    <ion-title>TITLE</ion-title>
  </ion-navbar>
</ion-header>

Mon variable.scss est:

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);
cssionic-frameworksassionic2ionic3
14
Pawan

Vous pouvez le modifier globalement si vous le souhaitez dans votre variables.scss sous/dans le dossier du thème:

$toolbar-background: blue;

Pour toutes les références Ionic Variables SASS à remplacer, suivez ceci lien

41
Yasir
 <ion-header>
  <ion-navbar color="color3">
    <ion-title></ion-title>
  </ion-navbar> 
</ion-header>

vous pouvez définir votre couleur personnalisée dans src/theme/variable.scss comme ceci:

$colors: (
  primary:    #8B4789,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  color1: #15c178,
  color2: #8B4789,
  color3 : #07904d,
  color4: #673665,
  brown: #B75E33,
  ycBlue: #638AF1
);

J'espère que cela fonctionnera pour vous

17
Devansh sadhotra

Vérifiez les documents officiels . Il existe un attribut color qui prend la clé du $colors carte.

<ion-header>
  <ion-navbar color="danger">
    <ion-title>TITLE</ion-title>
  </ion-navbar>
</ion-header>
7
Suraj Rao

Définissez la couleur comme ceci:

<ion-header>
  <ion-navbar color="danger">
    <ion-title>TITLE</ion-title>
  </ion-navbar>
</ion-header>
4
sebaferreras