Avatar 头像

开发指南

何时使用

用于展示账号信息,通常为一个或一群成员的头像展示。

成员名称

头像

单个头像

不同尺寸

默认
默认
默认
默认
默认

结合Tooltip使用

文本头像

当用户未上传头像时,系统会自动生成文本头像。规则如下:

不同尺寸

单图片头像

单个图片头像,不带附加操作

头像群

  • 完整展示组内每一个成员的头像

  • 头像之间独立不遮挡,区别组的暗示

  • 每个头像均可以单独点击,点击之后的操作根据业务需要定制

头像组

  • 默认最多只显示 4 个头像位

  • 超过 4 个头像,最后一个位置为 ...

  • 头像之间堆叠,表意组的暗示

  • 每个头像建议不要增加单独点击的交互行为

  • hover 成员头像,Tooltip 显示成员名称

  • 点击「···」,进入成员列表页

API

Avatar

参数说明类型默认值
style设置组件样式Object-
className设置组件classNameString-
size设置组件尺寸,可选值 'xs', 'small', 'medium', 'large', 'xl'String'medium'
img设置头像图片地址,必填String-
text设置头像旁文案,必填String-
onClose点击关闭回调Function() => {}
onClick点击头像回调Function() => {}

Avatar.TextAvatar

参数说明类型默认值
style设置组件样式Object-
className设置组件classNameString-
size设置组件尺寸,可选值 'xs', 'small', 'medium', 'large', 'xl'String'medium'
text设置头像文案,必填String-

Avatar.ImageAvatar

参数说明类型默认值
style设置组件样式Object-
className设置组件classNameString-
size设置组件尺寸,可选值 'xs', 'small', 'medium', 'large', 'xl'String'medium'
img设置头像图片地址,必填String-

Avatar.ClusterAvatar

参数说明类型默认值
style设置组件样式Object-
className设置组件classNameString-
dataSource头像群数据源,数组成员见下方,必填Array-
onSelect点击单个头像回调,入参为该头像相关参数Function(data) => {}
onClose关闭单个头像回调,入参为该头像相关参数Function(data) => {}
onAdd点击添加回调Function() => {}

Avatar.GroupAvatar

参数说明类型默认值
style设置组件样式Object-
className设置组件classNameString-
dataSource头像群数据源,数组成员见下方,必填Array-
onClickMore点击更多回调Function() => {}

dataSource成员

参数说明类型默认值
img头像图片地址,必填String-
text头像对应文案,必填String-
id头像对应id,必填String or Number-