web-dev-qa-db-fra.com

Matière angulaire personnaliser onglet

J'utilise 4 angulaire et j'utilise Matériau angulaire .

<md-tab-group [disableRipple]=true>
    <md-tab label="Tab 1"></md-tab>
    <md-tab label="Tab 2"></md-tab>
</md-tab-group>

Comment puis-je personnaliser complètement la couleur d'arrière-plan lorsque (non sélectionné/sélectionné), la couleur du texte, etc. J'ai déjà essayé d'utiliser des pseudo-classes ... mais toujours sans résultat. --- J'ai défini le font-size avec succès, mais la couleur du texte est un peu instable une fois définie. S'il vous plaît aider.

Mettre à jour:

J'ai essayé de changer l'arrière-plan en transparent lorsque sélectionné, j'essaie de remplacer la couleur lorsque le lien n'est pas sélectionné dans l'onglet, etc., mais cela ne fonctionne toujours pas. 

/* Styles go here */

  .mat-tab-label{
    color:white;
    min-width: 25px !important;
    padding: 5px;
       background-color:transparent;
        color:white;
        font-weight: 700;
  }

  /deep/ .mat-tab-label{
    min-width: 25px !important;
    padding: 5px;
       background-color:transparent;
        color:white;
        font-weight: 700;
}

.md-tab.ng-scope.ng-isolate-scope.md-ink-ripple.md-active{
      background-color:transparent;
      color:white;
      font-weight: 700;
  }

.md-tab.ng-scope.ng-isolate-scope.md-ink-ripple{
    background-color:transparent;
    color:white;
    font-weight: 700;
}



.mat-tab-label:active{
    min-width: 25px !important;
    padding: 5px;
       background-color:transparent;
        color:white;
        font-weight: 700;
}

.mat-tab-label:selected{
    min-width: 25px !important;
    padding: 5px;
       background-color:transparent;
        color:white;
        font-weight: 700;
}
angularangular-material2
8
Desu

Dans votre composant, définissez ViewEncapsulation sur None et ajoutez les styles dans votre fichier composant.css. 

Modifications dans le code TypeScript: 

import {Component, ViewEncapsulation} from '@angular/core';

@Component({
  ....
  encapsulation: ViewEncapsulation.None
})

Composant CSS:

/* Styles for tab labels */
.mat-tab-label {
    min-width: 25px !important;
    padding: 5px;
    background-color: transparent;
    color: red;
    font-weight: 700;
}

/* Styles for the active tab label */
.mat-tab-label.mat-tab-label-active {
    min-width: 25px !important;
    padding: 5px;
    background-color: transparent;
    color: red;
    font-weight: 700;
}

/* Styles for the ink bar */
.mat-ink-bar {
    background-color: green;
}

Démo

21
Faisal

Si vous ne souhaitez pas toucher à ViewEncapsulation, utilisez plutôt :: ng-deep avec le sélecteur de classe (inspecter par l'outil de développement du navigateur).

Par exemple (Angular 5, Material 2):

/* active tab */
::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label-active {
color:red;
background-color: green;
}

/* ink bar */
::ng-deep .mat-ink-bar {
background-color: var(--primary-color,#1F89CE) !important;
}
9
Quan VO

Dernière solution: -

1) Remplacer dans styles.css 2) Utiliser le sélecteur de composant de l'emplacement de cet onglet de matériau

styles.css

  app-child .mat-tab-label.mat-tab-label-active {
    padding: 0px 15px ;
  justify-content: flex-start;
  }

  app-child .mat-tab-label{
    padding: 0px 15px ;
  justify-content: flex-start;
  }

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
    background:#6168e7;
  }
0
Mahi

Il m'a fallu beaucoup de temps pour comprendre comment changer la couleur de fond des onglets en prenant le pas sur la conception du matériau. Je ne sais pas où partager mon résultat final, alors voilà: 

Pour le fichier .ts: 

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css'],
  encapsulation: ViewEncapsulation.None
})

Pour le fichier css:

.mat-tab-labels, .mat-tab-label, .mat-tab-link {
  color: white;
  font-size: 16px;
  background-color: #804A71;
}

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

Il s'agit donc à la fois de la couleur d'arrière-plan, de la couleur et de la taille du texte (libellé) et de la barre d'onglets située sous le texte. Cela a finalement fonctionné lorsque j'ai utilisé à la fois les .mat-tab-labels et .mat-tab-label.

0
rikkep