将通知徽章添加到 mat-tab

Question

我正在尝试将通知徽章添加到类似于下图的垫子标签，

选项卡右上角的通知徽章

但我似乎找不到在角材料选项卡上执行此操作的方法。因为徽章被剪掉了。

这是一个stackblitz示例：https ://stackblitz.com/edit/angular-eqlmkb-zzkrtg

有没有办法做到这一点？

Answer 1

您可以为 mat-tab 创建自定义标签模板，并在标签中放置图标/徽章等。

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label>
      <span matBadge="4" matBadgeOverlap="false">Label with Badge</span>
    </ng-template>
    Content
  </mat-tab>
</mat-tab-group>