角材料徽章位置

Question

我正在尝试在菜单列表中添加角形材料徽章。

是否可以将徽章放置在列表项的中央？

官方文件说：“默认情况下，徽章将放置在之后的上方。可以通过定义属性matBadgePosition跟随其后的| below和after | after来更改方向。”

但是我需要排除此上方|下方位置选项

或者至少可以在列表项中将整个徽章设置为可见

Answer 1

mat-badge-medium.mat-badge-above .mat-badge-content {
  top: unset;
  right: unset;
}

同时删除由材质设置的顶部和右侧值。

Answer 2

选中此blitzy

使用CSS解决

.mat-badge-medium.mat-badge-above .mat-badge-content {
    top: -3px;
}

Answer 3

如果你想从自己的 component.css 文件中设置样式，你可以这样做：

:host ::ng-deep .mat-badge-content 
{
left: -4px !important;
top: 40px !important;
}