时间戳

首页 > 解决方案 > 在 mat 选项卡上将无选项卡设置为默认活动选项卡

angular - 在 mat 选项卡上将无选项卡设置为默认活动选项卡

问题描述

我使用 实现了搜索功能mat-tab，我不需要在初始加载时选择选项卡。仅当用户单击特定选项卡时，选项卡才应处于活动状态。

目前，第一个选项卡在加载时处于活动状态。我试过设置selectedIndex="null"但没有用。此外，我需要在单击按钮时重置选定的选项卡。

使用 mat 选项卡搜索

标签： angularangular-materialmat-tab

解决方案

当前 API 版本中没有预定义的选项可以取消选择所有选项卡，因为这暗示至少应该有一个选项卡处于活动状态。但是有一个小解决方法（恕我直言，这似乎很好）：我们可以在 index 处再添加一个辅助选项卡0，将其留空（没有任何内容）并用display: none. 这样您就有了额外的不可见选项卡，并且您仍然可以选择导航到此选项卡，这看起来非常接近取消选择所有选项卡。

您可以通过几行 HTML / CSS 来实现它。

HTML：

<button (click)="tabs.selectedIndex = 0">RESET</button>
<mat-tab-group #tabs>
  <mat-tab></mat-tab> <!-- ADDITIONAL TAB -->
  <mat-tab label="First">
    <p>Content 1</p>
  </mat-tab>
  <mat-tab label="Second">
    <p>Content 2</p>
  </mat-tab>
  <mat-tab label="Third">
    <p>Content 3</p>
  </mat-tab>
</mat-tab-group>

CSS：

::ng-deep .mat-tab-labels > .mat-tab-label:first-child {
  display: none;
}

这是一个有效的STACKBLITZ，您可以看到它的实际效果。

推荐阅读