将无选项卡设置为垫选项卡上的默认活动选项卡

Question

我已经使用mat-tab实现了搜索功能，在初始加载时不需要选择任何标签。 仅当用户单击特定选项卡时，选项卡才应激活。

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

Answer 1

当前的API版本中没有预定义的选项可以取消选择所有标签，因为这意味着至少应激活一个标签。但是有一个较小的解决方法（它看起来非常不错，恕我直言）：我们可以在索引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，您可以在运行中看到它。

Answer 2

我的感觉是，如果您不希望最初显示任何选项卡内容，或者不希望单击它，则将其渲染。您可以隐藏内容，直到单击选项卡面板。如下所示：

.HTML

<mat-tab-group (selectedTabChange)="onTabPanelClick($event, $event.tab)">

        <mat-tab label="First-Tab">
          <div class="col-md-12" *ngIf="isFirstTabVisible">
          </div>
        </mat-tab>

        <mat-tab label="Second-tab">
          <div class="col-md-12" *ngIf="isSecondTabVisible">
          </div>
        </mat-tab>

        <mat-tab label="Third-tab">
          <div class="col-md-12" *ngIf="isThirdTabVisible">
          </div>
        </mat-tab>

</mat-tab-group>

.ts

onTabPanelClick(event, tab) {
   this.isFirstTabVisible= (event.index === 0) ? true : false;
   this.isSecondTabVisible= (event.index === 1) ? true : false;
   this.isThirdTabVisible= (event.index === 2) ? true : false;
}

Answer 3

mat选项卡处于活动状态

mat-tab-label-active

::ng-deep .mat-tab-label-active {
  background-color : red;
  font-size : 15px
}