角度2材料垫片尺寸

时间:2017-06-06 09:55:23

标签: angular angular-material angular-material2

我有以下代码

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

它不起作用。知道如何处理这个吗?

5 个答案:

答案 0 :(得分:24)

试试这个:

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

答案 1 :(得分:4)

在我的情况下,无法接受的答案无法正常工作-在两个标签之间切换时,特定标签的train_dataset = tf.data.Dataset.from_tensor_slices((x_train, y_train)).batch(64).shuffle(10000) 的宽度正在改变,而且看起来不太好,因此我添加了mat-tab-link来解决它

body

答案 2 :(得分:1)

这对我有用

.mat-tab-group > .mat-tab-header > .mat-tab-label-container > .mat-tab-list > .mat-tab
labels {
  .mat-tab-label[role^='tab'] {
    min-width: 72px;
  }
}

答案 3 :(得分:1)

没有!important

/* 
    ::ng-deep disables view-encapsulation of Angular components 
        -> to avoid global style bleeding use it in combination with :host
        -> https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
*/
:host ::ng-deep .mat-tab-label {
    min-width: 100px;
}

答案 4 :(得分:0)

如果要控制height选项卡的widthangular material,请使用样式,后跟::ng-deep。检查以下代码以修改heightwidth

::ng-deep .mat-tab-label
{
  height: 27px !important;
  min-height: 5px!important;
  margin: 3px!important;
  width: 90px!important;
  min-width: 5px!important;
}

enter image description here