角度2材料md-tab尺寸
Ais*_*ngh 9 angular-material angular-material2 angular
我有以下代码
<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>
显示如下:
但是我想减少标签宽度,如下所示:
问题是,当我在运行时更改css时,它调整得很好,但是当我把css放到:
.mat-tab {
min-width: 50px !important;
}
.mat-tab-label[_ngcontent-c9]{
min-width: 50px !important;
}
它不起作用.知道如何处理这个问题吗？
Sha*_*mor 32
试试这个:
/deep/.mat-tab-label, /deep/.mat-tab-label-active{
min-width: 0!important;
padding: 3px!important;
margin: 3px!important;
}
- 如果您添加此解决方案,应用程序中的所有选项卡都将更新(单独将其添加到单个组件上),如果您不希望这样,请在选项卡组上添加ID并在scss/css上使用 (3认同)
- 你应该使用 ::ng-deep 而不是 /deep/ 了。 (2认同)
小智 6
在我的情况下，接受的答案效果不佳 - 在选项卡之间切换时body，特定选项卡的宽度发生变化并且看起来不太好，所以我添加了 mat-tab-link 来解决它
::ng-deep.mat-tab-link, ::ng-deep.mat-tab-label, ::ng-deep.mat-tab-label-active{
min-width: 97px!important;
}