Badge

Badge 组件生成一个小标签，该标签附加到其子元素上。

简介

Badge 是 UI 元素的小型描述符。它通常位于元素之上或附近，并通过显示数字、图标或其他简短的字符集来指示元素的状态。

Badge 组件创建一个应用于其子元素的 badge。

组件

import { Badge } from '@mui/base/Badge';

Badge 组件包裹着它所附加的 UI 元素。

结构

Badge 组件由一个根 <span> 组成，该 <span> 容纳了 Badge 所附加的元素，后跟一个 <span> slot 来表示 Badge 本身

<span class="BaseBadge-root">
  <!-- the element the badge is attached to is nested here -->
  <span class="BaseBadge-badge">badge content</span>
</span>

自定义结构

使用 slots prop 来覆盖根 slot 或任何其他内部 slot

<Badge slots={{ root: 'div', badge: 'div' }} />

使用 slotProps prop 将自定义 props 传递给内部 slots。以下代码片段将一个名为 my-badge 的 CSS 类应用于 badge slot

<Badge slotProps={{ badge: { className: 'my-badge' } }} />

TypeScript 中的用法

在 TypeScript 中，您可以将 slots.root 中使用的自定义组件类型指定为 unstyled 组件的泛型参数。这样，您可以安全地在组件上直接提供自定义根组件的 props

<Badge<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />

同样的道理也适用于特定于自定义原始元素的 props

<Badge<'img'> slots={{ root: 'img' }} src="badge.png" />

Hook

import { useBadge } from '@mui/base/useBadge';

useBadge hook 使您可以将 Badge 的功能应用于完全自定义的组件。它返回要放置在自定义组件上的 props，以及表示组件内部状态的字段。

Hooks *不* 支持 slot props，但它们支持 customization props。

自定义

Badge 内容

badgeContent prop 定义了 Badge 内部显示的内容。当此内容是数字时，您可以使用其他 props 进行进一步的自定义——请参阅下面的数值 Badge 部分。

以下演示展示了如何创建和样式化一个典型的数值 Badge，该 Badge 附加到一个通用的 box 元素

Badge 可见性

您可以使用 invisible prop 控制 Badge 的可见性。将 Badge 设置为 invisible 实际上并不会隐藏它——相反，此 prop 会将 BaseBadge-invisible 类添加到 Badge，您可以使用样式来定位该类，从而以您喜欢的方式隐藏它

数值 Badge

当 badgeContent 是数字时，以下 props 非常有用。

showZero prop

默认情况下，当 badgeContent={0} 时，Badges 会自动隐藏。您可以使用 showZero prop 覆盖此行为

max prop

您可以使用 max prop 为 badgeContent 设置最大值。默认值为 99。

可访问性

屏幕阅读器可能无法为用户提供有关 Badge 内容的足够信息。为了使您的 badge 可访问，您必须使用 aria-label 提供完整描述，如下面的演示所示