如何调整“垫”选项卡组的宽度以便在顶部栏中容纳多个“垫”选项卡？

Question

我正在进行一个角度项目，并使用mat选项卡将一些已呈现的数据显示到html页面上。现在，我面临的问题是，我总共有8个标签，当在笔记本电脑屏幕上观看时，它不适合在酒吧。它使用分页使我能够查看其他不适合屏幕的选项卡。如果我禁用分页，那么只有5个标签显示在8个。我有任何方式来样式，以便其余的列可以显示。附加一个屏幕截图的方式，我期待标签将被显示。任何帮助都会很有帮助。问候

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

这就是我想要的

​

这就是我要得到的

​

Answer 1

只需在主css文件中添加以下内容：

.mat-tab-links {
  flex-flow: wrap;
}

这里是关于Stackblitz包装垫.标签.链接的复制

有颜色的底部条动作不正常，但我认为没有其他方法可以做到这一点。您可以禁用它并为每个链接创建您的on效果自己的效果，或者在第一个链接下创建另一个mat选项卡。

编辑这里是我对stackblitz的预览：

​

​