将无选项卡设置为垫选项卡上的默认活动选项卡 [英] Set no tab as default active tab on mat tab

查看:92
本文介绍了将无选项卡设置为垫选项卡上的默认活动选项卡的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经使用 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.

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆