web-dev-qa-db-fra.com

Comment puis-je changer la couleur du titre ionique?

J'essaie de changer la couleur du titre de l'ion en ionic 2.

J'ai ce code suivant:

<ion-header>
  <ion-navbar>
   <ion-title primary>Title</ion-title>
  </ion-navbar>
</ion-header>

La couleur du ion-title ne change pas. J'essaye plusieurs choses comme:

<ion-title color="primary">Title</ion-title> 
<ion-title> 
    <p primary>Title</p>
</ion-title>

Avec le second, j'ai le titre dans la bonne couleur, mais l'en-tête est grand. J'ajoute donc ceci dans le variables.scss:

$toolbar-ios-height: 5rem; // ios
$toolbar-md-height: 5rem;  // Android

Mais rien ne change. Quelqu'un at-il une solution? Ou dois-je utiliser la balise p ou h pour changer la couleur?

htmlionic-frameworksassionic2ionic3
11
CoCoNours

Retirer le color="..." du ion-title élément et utilisez ces variables sass dans votre variables.scss fichier:

$toolbar-md-title-text-color: #777;
$toolbar-ios-title-text-color: #777;
$toolbar-wp-title-text-color: #777;

Si vous souhaitez utiliser une des couleurs incluses dans les variables de couleur nommées

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,

  ...

  custom:     #777
);

Vous pouvez le faire en utilisant map-get comme ça:

$toolbar-md-title-text-color: map-get($colors, custom);
$toolbar-ios-title-text-color: map-get($colors, custom);
$toolbar-wp-title-text-color: map-get($colors, custom);

Remarque:

Définir la couleur avec juste l'attribut color est déconseillé depuis la version 3.0.0 de Ionic plus d'informations =.

Mise à jour:

[...] tous les éléments de la barre de navigation changent de couleur. Pouvons-nous simplement changer le titre de l'ion? Ou avoir une deuxième variable pour changer les autres éléments?

Vous pouvez ajouter cette règle de style dans le app.scss fichier (pour le rendre global) et il ne changera que le titre et rien d'autre:

.toolbar-title.toolbar-title-md, 
.toolbar-title.toolbar-title-ios, 
.toolbar-title.toolbar-title-wp { color: map-get($colors, custom); }
20
sebaferreras

Je sais que cette question a été répondue, mais une autre façon de définir la couleur du texte dans le titre est dans le fichier variables.scss,

$colors: (
    calm: (
      base: #000,
      contrast: #ffc900
    ),
   etc..
);



<ion-navbar color="calm">
    <ion-title>Some Text</ion-title>
</ion-navbar>

la base sera la couleur de votre fond et le contraste sera la couleur de votre texte/icône

6
Thomas Degroot