css - mat-button-group css上的角材质徽章出错

Question

当我尝试在 mat-button-toggle-group 上添加徽章时，只显示了一半。

请找到以下内容

<mat-button-toggle-group #filtergroup="matButtonToggleGroup" value="myCase">
    <mat-button-toggle value="myCase" matBadge="8" matBadgePosition="after">
        My Cases
    </mat-button-toggle>
    <mat-button-toggle>
        My Team
    </mat-button-toggle>
</mat-button-toggle-group>

https://stackblitz.com/angular/emrqojllmka?file=app%2Fbadge-overview-example.html

我怎样才能让它以正确的方式显示？

Answer 1

为避免中断，您需要覆盖以下overflow属性mat-button-toggle-group：

<mat-button-toggle-group #filtergroup="matButtonToggleGroup" value="myCase" style="overflow:visible">

但是，徽章仍会与相邻的按钮切换重叠。要解决这个问题，您需要提高徽章类的 z-index：

.mat-badge-content {
    z-index: 1;
}