角形徽章-随着长度的增加而改变形状

Question

我正在使用Angular Material徽章，并且如果内容为一位或两位数/字符，我希望形状为完整的圆形 并成长为带有弯曲边缘的矩形（例如android / iPhone图标徽章）。但是，随着徽章内容的增加，我会得到省略号，或者我可以使它成为带有弯曲边缘的矩形（值较小），并且形状会随着内容的增加而增大。{{3} }

这是.mat-badge-content css

{
  width: auto;
    display: grid;
    min-width: 22px;
    min-height: 18px;
    text-align: center;
    align-items: center;
    padding: 2px;
    // border-radius: 10px;
}

请提出如何在Angular徽章中获得所需的行为。谢谢。

Answer 1

如果徽章编号超过一定长度，如何动态添加类以更改徽章的边框半径/宽度？

例如您的html

<span [ngClass]="badgeCount > 99 ? 'override' : ''" class="badge mat-badge-content" *ngIf="badgeCount > 0">{{badgeCount}}</span>

如果计数超过99（即变为3位数字，那么我将应用override类）。

并添加以下CSS：

.override {
  width: inherit !important;
  border-radius: 5px !important;
}

请参阅StackBlitz here。

Answer 2

您只需要width: auto;和border-radius: 13px;边界半径就必须是包括填充在内的总高度的一半，默认情况下为26px（22px高度加上2 * 2px填充）。但是问题在于徽章将向左扩展并可能模糊内容，因此您还需要更改right属性。

.stretch-badge > .mat-badge-content {
  width: auto;
  border-radius: 13px;
  right: unset !important;
}

将其添加到您的全局样式后，您可以将其应用于徽章的父组件：

<span matBadge="stretch badge" class="stretch-badge">Text with a stretched badge</span>

如果您更改字体大小或填充等-使徽章具有不同大小的任何内容-您可能需要调整边框半径。