Angular 2 材料垫标签尺寸 [英] Angular 2 material mat-tab size

问题描述

我有以下代码

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

</mat-tab-group>

显示如下:

但是我想减少标签宽度，如下所示:

问题是，当我在运行时更改 css 时，它会调整得很好，但是当我像这样放置 css 时:

.mat-tab {最小宽度:50px！重要；}.mat-tab-label[_ngcontent-c9]{最小宽度:50px！重要；}

它不起作用.知道如何解决这个问题吗?

解决方案

试试这个:

/deep/.mat-tab-label,/deep/.mat-tab-label-active{最小宽度:0！重要；填充:3px！重要；边距:3px！重要；}

注意: 在 angular 8 /deep/ 不工作...你可以使用 ::ng-deep，像这样:

::ng-deep.mat-tab-label, ::ng-deep.mat-tab-label-active{最小宽度:0！重要；填充:3px！重要；边距:3px！重要；}

I have the following piece of code

  <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>

which displays like:

However I want to reduce tabs width, like this:

The problem is, when I change css at run time, it adjusts fine, but when I put css like:

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

It doesn't work. Any idea how to approach this ?

解决方案

Try this:

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

NOTE: In angular 8 /deep/ not working... you can use ::ng-deep, like so:

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

这篇关于Angular 2 材料垫标签尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！