css - 将通知徽章添加到 mat-tab

Question

我正在尝试将通知徽章添加到类似于下图的 mat-tab 中，

选项卡右上角的通知徽章

但我似乎无法在有角材料标签上找到一种方法。因为徽章被剪掉了。

这是一个 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>