angular - 角材质徽章位置

Question

我正在尝试在我的菜单列表中实现角度材质徽章。

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

官方文档说：“默认情况下，徽章会放在after的上方。可以通过定义matBadgePosition属性来改变方向，follow by above|below and before|after。”

但我需要排除这个高于|低于位置选项

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

Answer 1

检查这个闪电战

使用 CSS 解决

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

Answer 2

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

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

Answer 3

如果您想从自己的 component.css 文件中对其进行样式设置，您可以执行以下操作：

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