web-dev-qa-db-fra.com

Angular 2 mat-tab de matière

J'ai le morceau de code suivant

  <mat-tab-group>
    <div *ngFor="let question of subcategory.questions">
        <mat-tab label={{question.question_id}} class="question-tab">{{question.question}}</mat-tab>
    </div>
  </mat-tab-group>

qui affiche comme: 

Cependant, je veux réduire la largeur des onglets, comme ceci: 

Le problème est que lorsque je change de css au moment de l'exécution, il s'ajuste bien, mais quand je mets css comme:

.mat-tab {
  min-width: 50px !important;
}
.mat-tab-label[_ngcontent-c9]{
    min-width: 50px !important;
}

Ça ne marche pas. Une idée de comment aborder cela?

angularangular-materialangular-material2
19
Aishwat Singh

Essaye ça:

/deep/.mat-tab-label, /deep/.mat-tab-label-active{
 min-width: 0!important;
 padding: 3px!important;
 margin: 3px!important;
}

REMARQUE: In angular 8 /deep/ ne fonctionne pas ... vous pouvez utiliser ::ng-deep, ainsi:

::ng-deep.mat-tab-label, ::ng-deep.mat-tab-label-active{
 min-width: 0!important;
 padding: 3px!important;
 margin: 3px!important;
}
43
Shailesh Ladumor

Dans mon cas, la réponse acceptée n'a pas bien fonctionné - lors du basculement entre les onglets, la largeur de body de l'onglet spécifique changeait et elle ne semblait pas agréable, j'ai donc ajouté mat-tab-link pour le résoudre

::ng-deep.mat-tab-link,  ::ng-deep.mat-tab-label, ::ng-deep.mat-tab-label-active{
    min-width: 97px!important;
}
2
Dmitriy Ashmarin