徽标
Badge 组件生成一个小标签，附加到其子元素上。
Badge API
导入
import { Badge } from '@mui/base/Badge';
// or
import { Badge } from '@mui/base';阅读这篇关于 最小化包大小 的指南，了解更多差异。
原生组件的属性也可用。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| badgeContent | node | - | 徽标中渲染的内容。 |
| children | node | - | 徽标将相对于此节点添加。 |
| invisible | bool | false | 如果为 |
| max | number | 99 | 显示的最大计数。 |
| showZero | bool | false | 控制当 |
| slotProps | { badge?: func | object, root?: func | object } | {} | 用于 Badge 内部每个插槽的属性。 |
| slots | { badge?: elementType, root?: elementType } | {} | 用于 Badge 内部每个插槽的组件。可以是用于 HTML 元素的字符串或组件。 有关更多详细信息，请参阅下面的 Slots API。 |
ref 被转发到根元素。要了解如何自定义插槽，请查看 Overriding component structure 指南。
| 插槽名称 | 类名 | 默认组件 | 描述 |
|---|---|---|---|
| root | .base-Badge-root | 'span' | 渲染根元素的组件。 |
| badge | .base-Badge-badge | 'span' | 渲染徽标的组件。 |
这些类名对于使用 CSS 进行样式设置很有用。当特定状态被触发时，它们会被应用到组件的插槽上。
| 类名 | 描述 |
|---|---|
| .base-Badge-invisible | 当 invisible={true} 时，应用于徽标 span 元素的状态类。 |