Badge
import { Badge } from 'wisteria-ui';
用法
变体类型
<Badge variant="dot" />
<Badge variant="standard" />
是否显示
<Badge invisible={false} />
⚠️
当 invisible 为真时,将会隐藏组件。
自定义背景色
<Badge color="orange" />
<Badge color="green" />
<Badge color="violet" />
显示数值
<Badge count={0} />
<Badge showZero count={0} />
<Badge count={999} max={999} />
当设置 showZero 时,组件将会显示出数字 0
,否则将会隐藏。
偏移位置
<Badge variant="dot" offset={["-100%", 0]} />
<Badge count={999} offset={[0, "-100%"]} />
<Badge count={999} offset={[120, "0"]} />
offset 偏移位置基于右上角坐标。
API
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
invisible | 是否隐藏 | boolean | - |
variant | 变体类型 | dot | standard | standard |
color | 背景色 | string | - |
max | 数字最多值,超过将采用 代替 | number | 999 |
count | 显示的数字 | number | - |
showZero | 当 'count' 为 0 时,是否展示 | boolean | - |
offset | 设置偏移位置,[x, y] | [number|string, number|string] | - |
className | 自定义样式类名 | string | - |
style | 自定义样式对象 | JSX.CSSProperties | - |
children | - | ComponentChild | - |