web-dev-qa-db-fra.com

Comment changer la couleur des onglets dans l'application ionique?

Je souhaite changer la couleur active de mes onglets en une couleur personnalisée. J'aimerais aussi changer la couleur des icônes si possible.

Actuellement, l'onglet sur lequel je suis est la couleur positive et le reste des onglets est gris.

Pour ceux d’entre vous qui ne sont pas familiers avec les génies css, c’est un certain nombre de couleurs définies par défaut, exemple: positif = bleu, assertif = rouge.

Voici ce que j'ai jusqu'à présent:

tabs.html

<ion-tabs class="tabs-icon-top tabs-color-active-positive">    

 <!-- Home Tab -->    

 <ion-tab title="Home" icon-off="ion-home" icon-on="ion-Android-home" href="#/app/home">
    <ion-nav-view name="app-home"></ion-nav-view> 
  </ion-tab>

CSS:

.tabs-color-active-positive, .tabs {
color: #c49137 !important;

}

J'ai déconné avec le code CSS et les déclarations, mais cela ne fait aucune différence.

htmlcsscss3ionic-framework
5
Michael

Tout d'abord, .tabs ne pointe rien. Il faut donc le corriger ou le supprimer du sélecteur CSS. Si vous souhaitez cibler les 2 autres éléments, vous devez leur ajouter des classes.

En règle générale, les icônes changent de couleur si elles ont un arrière-plan transparent et sont créées en tant que fichiers .PNG. Essayez de changer la couleur de ces icônes Font Awesome pour voir comment elles peuvent passer du noir au bleu: https://fortawesome.github.io/Font-Awesome/icons/

Maintenant, pour réparer le code:

Je suppose qu'il existe une balise </ion-tabs>, qui manque dans l'exemple ci-dessus. Donc, je l'ai ajouté ici, seul avec des classes supplémentaires pour <ion-tab> & <ion-nav-view>. La classe .tab vous permet de regrouper plusieurs onglets lorsque vous les ciblez à l'aide de jQuery ou de CSS.

HTML:

<ion-tabs class="tabs-icon-top tabs-color-active-positive">      
    <ion-tab class="tab tab-home" title="Home" icon-off="ion-home" icon-on="ion-Android-home" href="#/app/home">
        <ion-nav-view class="nav-view-home" name="app-home"></ion-nav-view> 
    </ion-tab>
</ion-tabs>

Le nom de classe .tabs-icon-top est un nom de classe racine. C'est optionnel. Il est recommandé de l'utiliser, afin que votre code CSS/couleur CSS ne se répande nulle part ailleurs sur la page où un nom de classe .tab ou .tab-home lui est appliqué. Vous pouvez utiliser n'importe lequel de ces sélecteurs CSS et vous n'avez pas besoin de toute cette pile. Ils deviennent simplement plus spécifiques à mesure qu'ils progressent vers la droite. (N'hésitez pas à supprimer les lignes 1, 2 ou 3 et la virgule, si nécessaire.)

CSS:

.tabs-icon-top,
.tabs-icon-top .tab,
.tabs-icon-top .tab .nav-view-home {
    color: #c49137;
}

Vous pouvez également l'utiliser pour sélectionner tous les onglets, qui sont des espaces de noms:

.tabs-icon-top .tab {
    color: #c49137;
}

Ou ceci pour sélectionner un onglet individuel:

.tabs-icon-top .nav-view-home {
    color: #c49137;
}
6
Clomp
.tabs-md .tabbar {
    background: #00c6ff;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0072ff, #00c6ff);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0072ff, #00c6ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
0
kuldeep kumar

Si vous utilisez Sass, vous pouvez simplement mettre ce qui suit dans votre fichier CSS:

ion-tabs {
  @include tabs-standard-color('tabs-color-active-[custom name here]', 
   [main color], [color if not selected]);
}

De cette façon, vous pouvez également éviter de remplacer les styles existants et créer simplement une classe personnalisée. Vous pouvez également choisir de remplacer le $positive pour modifier chaque élément utilisant cette couleur.

Du Sass, j'ai pu obtenir le CSS, ça n'a pas l'air joli, mais ça devrait faire l'affaire:

ion-tabs.tabs-color-active-custom .tab-item {
  color: [inactive color]; 
}

ion-tabs.tabs-color-active-custom .tab-item.tab-item-active, ion-tabs.tabs-color-active-custom .tab-item.active, ion-tabs.tabs-color-active-custom .tab-item.activated {
    color: [active color]; 
}
0
Dexter