[英]Angular 2 material mat-tab size
我有以下代碼
<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;
}
它不起作用。 知道如何解決這個問題嗎?
嘗試這個:
/deep/.mat-tab-label, /deep/.mat-tab-label-active{
min-width: 0!important;
padding: 3px!important;
margin: 3px!important;
}
注意:在 angular 8 /deep/
不工作...你可以使用::ng-deep
,像這樣:
::ng-deep.mat-tab-label, ::ng-deep.mat-tab-label-active{
min-width: 0!important;
padding: 3px!important;
margin: 3px!important;
}
在我的情況下,接受的答案效果不佳 - 在選項卡之間切換時,特定選項卡的body
寬度發生變化並且看起來不太好,所以我添加了 mat-tab-link 來解決它
::ng-deep.mat-tab-link, ::ng-deep.mat-tab-label, ::ng-deep.mat-tab-label-active{
min-width: 97px!important;
}
這對我有用
.mat-tab-group > .mat-tab-header > .mat-tab-label-container > .mat-tab-list > .mat-tab
labels {
.mat-tab-label[role^='tab'] {
min-width: 72px;
}
}
沒有!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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.