css - Angular 徽章 - 随着长度的增加改变形状

Question

我正在使用 Angular Material 徽章，如果内容是一位或两位数字/字符，我希望形状是完整的圆形 并长成具有 flex 边缘的矩形(如 android/iPhone 图标徽章)。但是我要么得到一个省略号 随着徽章内容的增长，或者我可以让它是一个带有小值的 flex 边缘的矩形 随着内容的增加，它的形状也会变大。

这是 .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

你只需要 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>

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