时间戳

首页 > 解决方案 > 2 行中的 12 个 Angular Material Mat 选项卡如何实现？

css - 2 行中的 12 个 Angular Material Mat 选项卡如何实现？

问题描述

我正在尝试在 2 行中使用 12 个带有角材料的垫子标签，如果显然只选择了一个垫子标签，我怎么能做到这一点？

提供的代码是 2 中的 12 个单独的选项卡，每个选项卡共 6 个，我可以这样显示它，因为顶部选择的选项卡是空的。

如果在一个容器中插入 12 个将给出一个我不想要的滑块

点击这里查看图片

<mat-tab-group mat-stretch-tabs animationDuration="100ms">
  <br>
  <mat-tab label="Events">
    <app-events></app-events>
  </mat-tab>
  <mat-tab label="Venues">
    <app-clubs></app-clubs>
  </mat-tab>
  <mat-tab label="Festivals">
    <app-events></app-events>
  </mat-tab>
  <mat-tab label="Concerts">
    <app-events></app-events>
  </mat-tab> 
  <mat-tab label="Restaurants">
    <app-events></app-events>
  </mat-tab> 
  <mat-tab label="Karaokes">
    <app-events></app-events>
  </mat-tab> 
</mat-tab-group>
<mat-tab-group mat-stretch-tabs animationDuration="100ms">
  <br>
  <mat-tab label="Events">
     <app-events></app-events>
  </mat-tab>
  <mat-tab label="Venues">
    <app-clubs></app-clubs>
  </mat-tab>
  <mat-tab label="Festivals">
    <app-events></app-events>
  </mat-tab>
  <mat-tab label="Concerts">
    <app-events></app-events>
  </mat-tab> 
  <mat-tab label="Restaurants">
    <app-events></app-events>
  </mat-tab> 
  <mat-tab label="Karaokes">
    <app-events></app-events>
  </mat-tab> 
</mat-tab-group>
<mat-tab-group mat-stretch-tabs animationDuration="100ms">
  <br>
  <mat-tab label="Events">
    <app-events></app-events>
  </mat-tab>
  <mat-tab label="Venues">
    <app-clubs></app-clubs>
  </mat-tab>
  <mat-tab label="Festivals">
    <app-events></app-events>
  </mat-tab>
  <mat-tab label="Concerts">
    <app-events></app-events>
  </mat-tab> 
  <mat-tab label="Restaurants">
    <app-events></app-events>
  </mat-tab> 
  <mat-tab label="Karaokes">
    <app-events></app-events>
  </mat-tab> 
</mat-tab-group>
<mat-tab-group mat-stretch-tabs animationDuration="100ms">
  <br>
  <mat-tab label="Events">
    <app-events></app-events>
  </mat-tab>
  <mat-tab label="Venues">
    <app-clubs></app-clubs>
  </mat-tab>
  <mat-tab label="Festivals">
    <app-events></app-events>
  </mat-tab>
  <mat-tab label="Concerts">
    <app-events></app-events>
  </mat-tab> 
  <mat-tab label="Restaurants">
    <app-events></app-events>
  </mat-tab> 
  <mat-tab label="Karaokes">
    <app-events></app-events>
  </mat-tab> 
</mat-tab-group>

标签： cssangularangular-material

解决方案

仅使用一个 mat-tab-group 并将其添加到您的 mat-tab-group

disablePagination="true"

https://material.angular.io/components/tabs/api#MatTabGroup

推荐阅读