组件
数据展示
Badge

Badge

import { Badge } from 'wisteria-ui';

用法

变体类型

<Badge variant="dot" />
<Badge variant="standard" />
Variant
99+

是否显示

<Badge invisible={false} />
⚠️
invisible 为真时,将会隐藏组件。
Invisible
99+

自定义背景色

<Badge color="orange" />
<Badge color="green" />
<Badge color="violet" />
Color
9+
99+
999+

显示数值

<Badge count={0} />
<Badge showZero count={0} />
<Badge count={999} max={999} />

当设置 showZero 时,组件将会显示出数字 0,否则将会隐藏。

0
0
999+

偏移位置

<Badge variant="dot" offset={["-100%", 0]} />
<Badge count={999} offset={[0, "-100%"]} />
<Badge count={999} offset={[120, "0"]} />
offset 偏移位置基于右上角坐标。
Offset
999+
999+

API

属性说明类型默认值
invisible是否隐藏boolean-
variant变体类型dot | standardstandard
color背景色string-
max数字最多值,超过将采用 代替number999
count显示的数字number-
showZero当 'count' 为 0 时,是否展示boolean-
offset设置偏移位置,[x, y][number|string, number|string]-
className自定义样式类名string-
style自定义样式对象JSX.CSSProperties-
children-ComponentChild-