0

我添加了 mat-card 并在其中放置了图标。卡片和图标都分配了徽章。卡片的徽章是长字符串，图标的徽章是 1 位或 2 位数字。但是为卡片提供的徽章显示为 A... 我尝试为 mat-badge-content 提供 CSS。但不工作。此外，当我提供 matBadgeSize="small" 时，只有文本大小在减小。直径保持不变。

任何人都可以帮助设置垫卡徽章并减小图标徽章的直径。角度版本是 13.1。

.custom-badge .mat-badge-content {
    width: auto;
    text-align: center;
    border-radius: 7px;
}    

.mat-icon {
    font-size: 20px;
}


<!-- begin snippet: js hide: false console: true babel: false -->
<mat-card matBadge="A587463215 - 01B" matBadgePosition="above before" matBadgeColor="accent" class="margin15 custom-badge">
<div class="row">
<div class="box-left">Date: 05-04-2021</div>
<div class="box-left">Work: 06-05-2021</div>
</div>
<mat-icon color="primary" matBadge="15" matBadgeColor="warn" matBadgeSize="small" class="custom-badge" matBadgeOverlap="false">visibility</mat-icon>
<mat-icon color="primary" matBadge="15" matBadgeColor="warn" matBadgeSize="medium" class="custom-badge" matBadgeOverlap="false">perm_identity</mat-icon>
</mat-card>

4

0 回答 0