web-dev-qa-db-fra.com

Angular 6 - ng-bootstrap - Onglets de style

Je rencontre ceci bootstrap tabs

<ngb-tabset>
    <ngb-tab title="Tab 1">
        <ng-template ngbTabContent>
            Tab 1
        </ng-template>
    </ngb-tab>
    <ngb-tab title="Tab 2">
        <ng-template ngbTabContent>
            Tab 2
        </ng-template>
    </ngb-tab>
</ngb-tabset>

La couleur du texte sur les onglets est bleue. Je sais que si je crée des styles globaux, je peux remplacer les valeurs par défaut. Mais je veux styliser les onglets du composant parent

Je sais que je peux styliser les composants enfants mais cela ne fonctionne pas dans ce cas ( Comment styliser les composants enfants à partir du fichier css du composant parent? ). Aucun conseil?

styles: [
`
 :Host { color: red; }

 :Host ::ng-deep parent {
   color:blue;
 }
 :Host ::ng-deep child{
   color:orange;
 }
 :Host ::ng-deep child.class1 {
   color:yellow;
 }
 :Host ::ng-deep child.class2{
   color:pink;
 }
`
],
angularangular-componentsng-bootstrap
6
Michalis

Pour le modèle suivant qui utilise les onglets ng-bootstrap:

<ngb-tabset class="tabset1">
    <ngb-tab title="Tab 1">
        <ng-template ngbTabContent>
            Tab 1
        </ng-template>
    </ngb-tab>
    <ngb-tab title="Tab 2">
        <ng-template ngbTabContent>
            Tab 2
        </ng-template>
    </ngb-tab>
</ngb-tabset>

vous pouvez remplacer le style de titre de l'onglet par défaut avec ces règles CSS:

:Host ::ng-deep .tabset1 a.nav-link {
  color: green;
}

:Host ::ng-deep .tabset1 a.nav-link.active {
  color: red;
  font-weight: bold;
}

Voir ce stackblitz pour une démo.

Remarque: Si l'attribut class="tabset1" n'est pas défini sur le ngb-tabset élément, le sélecteur .tabset1 doit être supprimé des styles CSS.

10
ConnorsFan