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

发布于01月18日

我想在右上角放两个徽章.为此，我使用了Angular Material.我用警徽做到的.但我有两个徽章怎么办？它应该看起来像这样:

当前代码: https://stackblitz.com/edit/stackblitz-starters-fdcabz?file=src%2Fmain.ts个

推荐答案

您需要多个标记，您可以为子元素使用position: absolute;个标记，以使其超出范围.下面还需要输出CSS！

政务司司长

@import '~@angular/material/prebuilt-themes/indigo-pink.政务司司长';

.card-badges {
  width: 300px;
  height: 200px;
  background: gray;
  border: 2px solid #000;
}
.card-badges > .mat-badge-content {
  margin-right: 20px;
}
.card-badges > .mat-badge-content {
  margin-right: 20px;
}
.inner-badge {
  position: absolute;
  right: 60px;
}
.inner-badge > .mat-badge-content {
  background-color: #3f51b5 !important;
}

import { Component } from '@angular/core';
import { booTStrapApplication } from '@angular/platform-browser';
import { MatBadgeModule } from '@angular/material/badge';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imporTS: [MatBadgeModule],
  template: `
    <div class="card-badges"
    matBadge="12" matBadgeOverlap="true" matBadgeColor="warn" matBadgePosition="after">
    <span class="inner-badge"
    matBadge="10" matBadgeOverlap="true" matBadgeColor="primary"></span>
    Card
  </div>
  `,
})
export class App {
  name = 'Angular';
}

booTStrapApplication(App);

stackblitz