徽章
徽章用作 UI 元素的小数值或状态描述符。
安装
npx nextui-cli@latest add badge
上述命令仅用于单独安装。如果已全局安装 @nextui-org/react，则可以跳过此步骤。
导入
用法
尺寸
颜色
变体
位置
形状
为了更好的定位，你可以使用 shape 属性来定义徽章的形状。
徽章可见性
你可以通过使用 isInvisible 属性来控制徽章的可见性。
内容示例
禁用边框
默认情况下，徽章有一个边框，你可以通过使用 showOutline={false} 属性来禁用它。
无障碍
不建议依赖徽章的内容来进行准确的播报。相反，考虑提供一个全面的描述，例如使用 aria-label。
API
徽章属性
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| children * | ReactNode | 包裹的组件。 | - |
| content | string | number | ReactNode | 徽章的内容。徽章将相对于其子元素进行渲染。 | - |
| variant | solid | flat | faded | shadow | 徽章的变体样式。 | solid |
| color | default | primary | secondary | success | warning | danger | 徽章的颜色。 | default |
| size | sm | md | lg | 徽章的大小。 | md |
| shape | circle | rectangle | 徽章的形状。 | rectangle |
| placement | top-right | top-left | bottom-right | bottom-left | 徽章的位置。 | top-right |
| showOutline | boolean | 如果为 true，徽章将有轮廓。 | true |
| disableOutline | boolean | 如果为 true，徽章将没有轮廓。 已弃用 改用 showOutline。 | false |
| disableAnimation | boolean | 如果为 true，徽章将没有动画。 | false |
| isInvisible | boolean | 如果为 true，徽章将不可见。 | false |
| isOneChar | boolean | 如果 true，徽章将具有相同的宽度和高度。 | false |
| isDot | boolean | 如果 true，徽章将具有较小的尺寸。 | false |
| classNames | Record<"base"｜"badge", string> | 允许为徽章插槽设置自定义类名。 | - |
