[英]How can i adjust the width of the mat-tab group so as to accommodate multiple mat-tabs in the top bar?
我正在研究 Angular 項目並使用 mat-tabs 在 html 頁面上顯示一些渲染數據。 現在我面臨的問題是我總共有 8 個標簽,當在筆記本電腦屏幕上查看時,它不適合在欄中。 它使用分頁使我能夠查看其他不適合屏幕的選項卡。 如果我禁用分頁,那么在 8 個選項卡中只顯示 5 個選項卡。我有任何方法可以設置樣式以便顯示剩余的列。 附上我期望標簽顯示方式的屏幕截圖。 任何幫助都會非常有幫助。 問候
HTML 零件
<mat-tab-group [disableRipple]='true' >
<mat-tab label="Overall Status Rollup" class="w3-bar w3-black" style="width: 5%;" >
<div *ngIf="project | async as project; else loading;">
<div style="padding-left:50px;padding-top:50px;"><h4 [innerHTML]="project['XYZ-2'].assignee"></h4></div>
<div style="padding-left:50px;padding-top:50px;" [innerHTML]="project['XYZ-2'].synopsis"></div>
</div>
<ng-template #loading>Loading User Data...</ng-template>
</mat-tab>
<mat-tab label="Test Infrastructure & Software">
<div *ngIf="project | async as project; else loading;">
<div style="padding-left:50px;padding-top:50px;"><h4 [innerHTML]="project['XYZ-2'].assignee"></h4></div>
<div style="padding-left:50px;padding-top:50px;" [innerHTML]="project['XYZ-9'].synopsis"></div>
</div>
<ng-template #loading>Loading User Data...</ng-template>
</mat-tab>
<mat-tab label="Product Assurance">
<div *ngIf="project | async as project; else loading;">
<div style="padding-left:50px;padding-top:50px;"><h4 [innerHTML]="project['XYZ-2'].assignee"></h4></div>
<div style="padding-left:50px;padding-top:50px;" [innerHTML]="project['XYZ-14'].synopsis"></div>
</div>
<ng-template #loading>Loading User Data...</ng-template>
</mat-tab>
<mat-tab label="Test Architecture & Framework">
<div *ngIf="project | async as project; else loading;">
<div style="padding-left:50px;padding-top:50px;"><h4 [innerHTML]="project['XYZ-2'].assignee"></h4></div>
<div style="padding-left:50px;padding-top:50px;" [innerHTML]="project['XYZ-17'].synopsis"></div>
</div>
<ng-template #loading>Loading User Data...</ng-template>
</mat-tab>
<mat-tab label="Factory Quality & Test">
<div *ngIf="project | async as project; else loading;">
<div style="padding-left:50px;padding-top:50px;"><h4 [innerHTML]="project['XYZ-2'].assignee"></h4></div>
<div style="padding-left:50px;padding-top:50px;" [innerHTML]="project['XYZ-30'].synopsis"></div>
</div>
<ng-template #loading>Loading User Data...</ng-template>
</mat-tab>
<mat-tab label="UDX Roll-up">
<div *ngIf="project | async as project; else loading;">
<div style="padding-left:50px;padding-top:50px;"><h4 [innerHTML]="project['XYZ-2'].assignee"></h4></div>
<div style="padding-left:50px;padding-top:50px;" [innerHTML]="project['XYZ-726'].synopsis"></div>
</div>
<ng-template #loading>Loading User Data...</ng-template>
</mat-tab>
<mat-tab label="EOS Roll-up">
<div *ngIf="project | async as project; else loading;">
<div style="padding-left:50px;padding-top:50px;"><h4 [innerHTML]="project['XYZ-2'].assignee"></h4></div>
<div style="padding-left:50px;padding-top:50px;" [innerHTML]="project['XYZ-727'].synopsis"></div>
</div>
<ng-template #loading>Loading User Data...</ng-template>
</mat-tab>
<mat-tab label="Data & Project Management">
<div *ngIf="project | async as project; else loading;">
<div style="padding-left:50px;padding-top:50px;" [innerHTML]="project['XYZ-1023'].synopsis"></div>
</div>
<ng-template #loading>Loading User Data...</ng-template>
</mat-tab>
</mat-tab-group>
CSS 零件
::ng-deep.mat-tab-header {
background-color: black;
}
::ng-deep.mat-ripple {
color: rgb(5, 214, 5);
font-weight: 700;
}
::ng-deep.mat-tab-link,
::ng-deep.mat-tab-label,
::ng-deep.mat-tab-label-active {
max-width: 13%;
}
::ng-deep.mat-tab-header-pagination {
display: none !important;
}
只需將其添加到您的主 css 文件中:
.mat-tab-links {
flex-flow: wrap;
}
這是Stackblitz 的復制品 - wrap mat-tabs-links
彩色底欄沒有正常工作,但我認為沒有其他方法可以做到這一點。 您可以禁用它並為每個鏈接創建自己的效果,或者在第一個鏈接下創建另一個 mat-tabs。
[編輯]這是我對 stackblitz 的預覽:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.