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;
}

垫按钮组css上的角材料标记出了错

1 个答案: