[英]How can i adjust the width of the mat-tab group so as to accommodate multiple mat-tabs in the top bar?
I am working on an Angular project and using mat-tabs to display some rendered data on to the html page.我正在研究 Angular 项目并使用 mat-tabs 在 html 页面上显示一些渲染数据。 Now the problem which I am facing is I have total 8 tabs and its not fitting in the bar when viewed on a laptop screen.
现在我面临的问题是我总共有 8 个标签,当在笔记本电脑屏幕上查看时,它不适合在栏中。 Its using pagination to enable me to view other tabs which are not fitting to the screen.
它使用分页使我能够查看其他不适合屏幕的选项卡。 If I disable the pagination then just 5 tabs are showing out of 8. I there any way to style so that the remaining columns can be displayed.
如果我禁用分页,那么在 8 个选项卡中只显示 5 个选项卡。我有任何方法可以设置样式以便显示剩余的列。 Attaching a screenshot of the way I am expecting the tabs to be displayed.
附上我期望标签显示方式的屏幕截图。 Any help would be really helpful.
任何帮助都会非常有帮助。 Regards
问候
HTML Part 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 Part 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;
}
Just add this in your main css file:只需将其添加到您的主 css 文件中:
.mat-tab-links {
flex-flow: wrap;
}
Here is a repro on Stackblitz - wrap mat-tabs-links这是Stackblitz 的复制品 - wrap mat-tabs-links
The colored bottom bar isn't acting properly but I don't think there is another way of doing this.彩色底栏没有正常工作,但我认为没有其他方法可以做到这一点。 you can disable it and create your on effect own effect for each links, or create another mat-tabs under the first one.
您可以禁用它并为每个链接创建自己的效果,或者在第一个链接下创建另一个 mat-tabs。
[Edit] Here is a preview i have of the stackblitz: [编辑]这是我对 stackblitz 的预览:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.