MatTabNavBar不显示箭头

问题描述

我注意到，如果容器对于选项卡来说太小，则在显示箭头时，MatTabNavBar的行为与常规MatTabGroup有所不同.

I've noticed that the MatTabNavBar is behaving different from a regular MatTabGroup when it comes to showing the arrows if the container gets too small for the tabs.

我使用官方文档来构建MatTabNavBar和MatTabGroup，但是您可以在此处看到MatTabGroup显示箭头，而MatTabNavBar没有箭头.

I used the official documentation to build the MatTabNavBar and MatTabGroup, but you can see here that the MatTabGroup is showing arrows and the MatTabNavBar is not.

https://angular-gaio5u.stackblitz.io

用于MatTabGroup的模板:

Template used for MatTabGroup:

<mat-tab-group>
  <mat-tab
    *ngFor="let tab of tabs"
    [label]="tab.label"
  >
    {{ tab.label }}
  </mat-tab>
</mat-tab-group>

用于MatTabNavBar的模板:

Template used for MatTabNavBar:

<nav mat-tab-nav-bar>
  <a
    mat-tab-link
    *ngFor="let tab of tabs"
    [active]="isActive(tab)"
    (click)="setActive(tab)"
  >
    {{ tab.label }}
  </a>
</nav>

...所以我有什么想念的吗?预期的结果是MatTabNavBar显示与MatTabGroup相同的箭头.

...so am I missing anything?! The expected result is the MatTabNavBar showing the same arrows as MatTabGroup.

推荐答案

仅供参考，@angular/[email protected]和更高版本中似乎已解决此问题.

FYI, this seems to be fixed in versions @angular/[email protected] and newer.

这篇关于MatTabNavBar不显示箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！