Tui

Badge 徽标

用于在按钮、图标等元素上显示徽标，通常用于显示数量或状态信息。

基础用法

最基础的徽标用法，支持数字和文本。

5

99+

NEW

示例代码

vue

不同值类型

支持数字、字符串等多种值类型。

5

99

99+

NEW

示例代码

vue

自定义样式

通过 color 和 bg 属性自定义徽标的颜色和背景色。

5

5

5

示例代码

vue

偏移位置

通过 offset 属性设置徽标的偏移量，接收一个包含两个数字的数组 [x, y]。

5

5

5

示例代码

vue

显示零值

通过 show-zero 属性控制当值为 0 时是否显示徽标。

5

0

0

示例代码

vue

圆角设置

通过 border-radius 属性设置徽标的圆角大小。

5

5

5

5

示例代码

vue

插槽使用

通过 content 插槽自定义徽标内容，实现更灵活的样式和交互效果。

HOT

示例代码

vue

属性 Props

value

徽标内容

string | number

''

showZero

当值为 0 时是否显示

boolean

true

offset

偏移量 [x, y]

[number, number] | null

[0, 0]

class

自定义类名

string

''

style

自定义样式

object

{}

color

文字颜色

string

'#fff'

bg

背景颜色

string

''

borderRadius

圆角大小

string | number

0

minWidth

最小宽度

string | number

18

插槽 Slots

default

默认插槽，用于放置徽标包裹的内容

content

徽标内容插槽，用于自定义徽标显示内容

基础用法

不同值类型

自定义样式

偏移位置

显示零值

圆角设置

插槽使用

属性 Props

插槽 Slots