Angular Material：如何同时使用两个徽章

算力阿峰

2026-7-2

Angular Material 右上角双徽章布局实现方案

要实现右上角放置两个徽章的效果，核心是通过相对定位容器+绝对定位徽章来控制两个徽章的位置，基于你已有的Angular Material环境，具体实现步骤如下：

实现步骤

用容器包裹需要添加徽章的目标元素（比如按钮、图标），给容器设置相对定位，作为徽章定位的参考基准
添加两个mat-badge元素，分别为它们设置自定义类，通过绝对定位调整各自的右上角位置，避免重叠
按需调整徽章的颜色、内容和样式细节

代码示例

组件模板代码

<!-- 带双徽章的容器 -->
<div class="badge-wrapper">
  <!-- 目标元素：这里用图标示例，可替换为你的实际元素 -->
  <mat-icon>notifications</mat-icon>
  
  <!-- 第一个徽章：右上角偏上位置 -->
  <span matBadge="3" matBadgeColor="warn" class="badge-item badge-top"></span>
  
  <!-- 第二个徽章：右上角偏下位置，与第一个错开 -->
  <span matBadge="NEW" matBadgeColor="accent" class="badge-item badge-bottom"></span>
</div>

CSS样式代码

.badge-wrapper {
  position: relative;
  display: inline-block;
  /* 可选：给容器加内边距，避免徽章超出元素范围 */
  padding: 8px;
}

.badge-item {
  /* 强制徽章脱离文档流，基于父容器定位 */
  position: absolute;
}

/* 第一个徽章位置：右上角顶部 */
.badge-top {
  top: 0;
  right: 0;
}

/* 第二个徽章位置：右上角底部，与第一个错开 */
.badge-bottom {
  top: 20px;
  right: 0;
  /* 如果需要横向并排，可改为 right: 20px; top: 0; */
}