Badge 标记

用于在图标或者其他组件上显示未读消息数量或者状态。

获取组件

MainIndividual
import { Badge } from 'rsuite';

演示

默认

带内容

位置

形状

如果包裹元素为圆形时, 为了让 Badge 的位置更加合理, 可以使用 shape 属性 circle。

尺寸

Badge 组件通过 size 属性支持不同的尺寸。

偏移

如果 Badge 的位置不合理, 可以使用 offset 属性进行微调。

不可见的

没有 children 的 Badge

颜色

Props

<Badge>

属性名称 类型(默认值) 描述 版本
children ReactNode 包裹的组件
classPrefix string ('badge') 组件 CSS 类名的前缀
color Color | CSSProperties['color'] 设置标记的颜色
compact boolean 是否为紧凑模式 Version 6.0.0 or above
content number | ReactNode 标记内容
invisible boolean 标记是否不可见 Version 6.0.0 or above
maxCount number(99) 最大计数（仅当 content 为 number 类型时有效）
offset [number,number] | [string, string] 定义标记相对于其被包裹元素的水平和垂直偏移 Version 6.0.0 or above
outline boolean(true) 是否为轮廓模式 Version 6.0.0 or above
placement PlacementCorners 设置标记在被包裹元素的位置 Version 6.0.0 or above
shape 'rectangle' | 'circle' 被包裹元素的形状 Version 6.0.0 or above
size 'xs' | 'sm' | 'md' | 'lg' | 'xl' ('md') 设置标记的尺寸

Color 

type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';

PlacementCorners 

type PlacementCorners = 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd';