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 | - |