头像 Avatar
用于代表用户或实体的图像元素。
基础用法
RVCN
Example
尺寸
使用 size 属性来控制头像的大小。
XSSMMDLGXL2XL
Example
形状
使用 shape 属性来控制头像的形状。
CIROSQ
Example
头像组
使用 BrAvatarGroup 组件将多个头像堆叠在一起。
U1U2U3
+2
U1U2U3U4
+6
Example
头像徽标
使用 BrAvatarBadge 组件显示状态徽标。
RVCNABXY
Example
API
BrAvatar
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| size | string | 'md' | 尺寸变体：xs, sm, md, lg, xl, 2xl |
| shape | string | 'circle' | 形状变体：circle, square, rounded |
| bordered | boolean | false | 是否显示边框 |
BrAvatarImage
Props
| 属性名 | 类型 | 说明 |
|---|---|---|
| src | string | 图片源地址 |
| alt | string | 图片替代文本 |
BrAvatarFallback
Props
| 属性名 | 类型 | 说明 |
|---|---|---|
| delayMs | number | 显示回退内容前的延迟（毫秒） |
BrAvatarGroup
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| max | number | - | 最大显示的头像数量 |
| size | string | 'md' | 组内头像的尺寸 |
| shape | string | 'circle' | 组内头像的形状 |
| bordered | boolean | true | 是否显示头像边框 |
BrAvatarBadge
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| status | string | 'online' | 状态：online, offline, busy, away |
| position | string | 'bottom-right' | 徽标位置：top-right, bottom-right, top-left, bottom-left |