无样式的徽章

徽章组件会在其子项（们）的右上角生成一个小徽章。

import BadgeUnstyled from '@mui/base/BadgeUnstyled';

基本用法

徽章的可见性

徽章组件的隐显可以通过 invisible 属性来设置。如果徽章不可见，那么它会被应用 MuiBadge-invisible 类。 It is up to the developer to provide styles that actually hide the badge.

1Show Badge

The badge hides automatically when badgeContent is zero. You can override this with the showZero prop.

<StyledBadge badgeContent={0}>
  <MailIcon />
</StyledBadge>
<StyledBadge badgeContent={0} showZero>
  <MailIcon />
</StyledBadge>

最大值

您可以使用 max 属性来限制徽章内容的最大值。默认被设置为 99。

请注意， badgeContent 应该是一个数字（或是一个可被转换为数字的值）才能工作。

9999+999+

<StyledBadge badgeContent={99}>
  <MailIcon />
</StyledBadge>
<StyledBadge badgeContent={100}>
  <MailIcon />
</StyledBadge>
<StyledBadge badgeContent={1000} max={999}>
  <MailIcon />
</StyledBadge>

无障碍设计

如果徽章的内容无法被正确的读取。那您应该提供一个完整的描述，例如，使用 aria-label：

99+

API

<BadgeUnstyled />