在两 (2) 行中显示 Angular Material 个选项卡

Question

我正在使用 Angular Material Tabs 构建一个选项卡组件，随着选项卡数量的增加，它会自动开始水平滚动。我不想这样做，而是想打破选项卡并将它们显示在两 (2) 行中。我该怎么做？

您可以在此处找到代码：StackBlitz

请帮我完成这个。

Answer 1

默认情况下 .mat-tab-labels 有 display:flex 如果你想在两行或更多行中显示所有选项卡你可以使用 display: block.

所以你可以这样css解决这个问题：

::ng-deep .mat-tab-labels {
  /* display: flex; */ default display is flex change to block
  display: block !important;
}

结果：

Show Angular Material Tabs in two (2) rows