web-dev-qa-db-fra.com

Comment changer la couleur de la barre d'encre de l'onglet actif?

Est-il possible de changer la couleur de la barre d'encre de l'onglet actif?

Par défaut, la barre d'encre est bleue. Voir ici pour un exemple.

J'ai essayé cela dans SCSS, mais cela ne fonctionne pas.

.mat-tab-label-container{
  .mat-tab-list{
    .mat-ink-bar {
      background-color: green
    }
  }
}

.mat-tab-label-active{
 color: green 
}

Tout le monde peut nous aider,

angularangular-materialangular-material2
6
Mark

Image Cela pourrait être similaire à ce que vous souhaitez réaliser

Veuillez voir ce lien ( Impossible de créer un onglet mat sans :: ng-deep et! Important ) et voter si cela vous aide, je pense que cela est similaire à ce que vous souhaitez réaliser.


Pour répondre à ta question

Vous devez utiliser la spécificité du sélecteur puis mettre votre style dans le style racine /src/styles.css (REMARQUE: cela ne le met pas dans le composants styleUrls votre style ne fonctionnera pas)

pour coiffer la barre d'encre

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
  background: yellow;
  height: 10px;
}


Changer la barre d'encre du soulignement en elliptique couvrant l'élément

Vous pouvez essayer ce code pour le rendre elliptique pour couvrir l'élément.

/* label style */
.mat-tab-label{
  background: #e7e7e7;
  color:  black;
  min-width: 60px!important;
}
/* focus style */
.mat-tab-group.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus, .mat-tab-group.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus{
  background: #e7e7e7;
}
/* ink bar style */
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
   background: rgba(149, 165, 166,0.3);
    height: 35px;
    border-radius: 100px;
    margin-bottom: 5px;
}

Veuillez voir l'échantillon en direct ici.

https://stackblitz.com/edit/dmgrave-ng-so-anser-tabs-style?file=styles.css

J'espère que cela t'aides.

17
davecar21