我正在做一个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 - 包裹mat-tabs-links(链接)
你可以禁用它,并为每个链接创建你的on effect自己的效果,或者在第一个链接下创建另一个mat-tabs。
(编辑) 这是一个预览,我有stackblitz的。