在 mat 选项卡上将没有选项卡设置为默认活动选项卡 [英] Set no tab as default active tab on mat tab

问题描述

我使用 mat-tab 实现了搜索功能，我不需要在初始加载时选择选项卡.只有当用户点击特定标签时，标签才会被激活.

I have search functionality implemented using mat-tab, I need no tab selected on initial load. Tab should get active only when user clicks on specific tab.

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

Currently, first tab is active on load. I have tried setting selectedIndex="null" but didn't work. Also, I need reset the selected tab on a button click.

推荐答案

在当前的 API 版本中没有预定义的选项来取消选择所有选项卡，因为这意味着至少应该有一个选项卡处于活动状态.但是有一个小的解决方法(恕我直言，这似乎很好):我们可以在索引 0 处再添加一个辅助选项卡，将其留空(没有任何内容)并使用 display 隐藏它:无.这样你就有了额外的不可见标签，你仍然可以选择导航到这个标签，这看起来非常接近取消选择所有标签.

There is no predefined option in the current API version to deselect all tabs because it's implied that at least one tab should be active. But there is a small workaround (and it seems quite good IMHO): we can add one more auxiliary tab at index 0, leave it empty (without any content) and hide it with display: none. This way you have additional invisible tab, and you still have an option to navigate to this tab, which looks pretty close to deselecting all the tabs.

只需几行 HTML/CSS 即可实现.

You can achieve it via just a few rows of 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，你可以看到它在行动.

And here is a working STACKBLITZ, you can see it in action.

这篇关于在 mat 选项卡上将没有选项卡设置为默认活动选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！