角标 Badge
一个用于显示计数、状态或提醒的小角标，附加到其他元素上（如按钮或图标）。
基础用法
将 Badge 附加到其他元素上以显示小角标。
8
隐藏源代码
最大值
max 设置角标的最大值，超过时以 ${max}+ 展示。
5
99+
隐藏源代码
点模式
通过设置 dot 为 true 只显示小圆点。
隐藏源代码
主题
Badge 支持主题：'primary'、'sakura'、'success'、'warning'、'danger'、'notice'。
1
1
4
5
1
4
隐藏源代码
角标偏移
通过 offset 调整角标位置。支持数字、数组 [x: number, y: number] 或对象 { x: number, y: number }。
?
!
隐藏源代码
自定义颜色
通过 color 设置角标背景色；通过 borderColor 设置角标边框颜色。
99
隐藏源代码
显示和隐藏
通过 visible 属性控制角标显示与否。
5
隐藏源代码
内容插槽
当 dot 为 false 时，可使用 content 插槽自定义角标内容。
HOT
* HOT
隐藏源代码
API
BadgeProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| value | number | string | 是 | '' | 角标显示的数值或字符串。 | 0.1.0 |
| max | number | 是 | | 数值上限，超出显示为 ${max}+。 | 0.1.0 |
| dot | boolean | 是 | false | 是否以小圆点显示。 | 0.1.0 |
| theme | 'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'notice' | 是 | 'danger' | 角标的主题。 | 0.1.0 |
| visible | boolean | 是 | true | 是否可见。 | 0.1.0 |
| offset | number | [number, number] | { x?: number; y?: number } | 是 | 0 | 角标标记的偏移。 | 0.1.0 |
| color | string | 是 | | 自定义背景色，详见 支持的颜色解析。 | 0.1.0 |
| borderColor | string | 是 | | 自定义边框颜色。 | 0.1.0 |
| contentProps | RestAttrs | 是 | | 透传给角标内容容器 DOM 的额外属性。 | 0.1.0 |
| pollSizeChange | boolean | 是 | false | 开启轮询组件尺寸变化，可能会影响性能。 | 0.1.0 |
BadgeSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| default | | 包裹的附着元素插槽。 | 0.1.0 |
| content | value: string | string | 角标内容插槽（在 dot 为 false 时生效）。 | 0.1.0 |