Clarity Design · 协作产品 UI 设计语言

头像
文本头像
单图片头像
头像群
头像组

开发指南

成员名称

头像

单个头像

不同尺寸

默认

默认

默认

默认

默认

结合Tooltip使用

默认

张三

李四

赵二

B老

天罡

地煞

文本头像

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

不同尺寸

单图片头像

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

晓光

头像群

完整展示组内每一个成员的头像
头像之间独立不遮挡，区别组的暗示
每个头像均可以单独点击，点击之后的操作根据业务需要定制

李小

李小

李小

头像组

默认最多只显示 4 个头像位
超过 4 个头像，最后一个位置为 ...
头像之间堆叠，表意组的暗示
每个头像建议不要增加单独点击的交互行为
hover 成员头像，Tooltip 显示成员名称
点击「···」，进入成员列表页

API

Avatar

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

Avatar.TextAvatar

参数	说明	类型	默认值
style	设置组件样式	Object	-
className	设置组件className	String	-
size	设置组件尺寸，可选值 'xs', 'small', 'medium', 'large', 'xl'	String	'medium'
text	设置头像文案，必填	String	-
colorSets	头像背景色集，会根据text的charCode选取其中一个作为背景色	String数组	['#BC61CF', '#F26666', '#F29A52', '#F4C329', '#CBD057', '#289ED3', '#29B3F0']

Avatar.ImageAvatar

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

Avatar.ClusterAvatar

参数	说明	类型	默认值
style	设置组件样式	Object	-
className	设置组件className	String	-
dataSource	头像群数据源，数组成员见下方，必填	Array	-
colorSets	头像背景色集，img不存在时会根据text的charCode选取其中一个作为背景色	String数组	['#BC61CF', '#F26666', '#F29A52', '#F4C329', '#CBD057', '#289ED3', '#29B3F0']
onSelect	点击单个头像回调，入参为该头像相关参数	Function	(data) => {}
onClose	关闭单个头像回调，入参为该头像相关参数	Function	(data) => {}
onAdd	点击添加回调	Function	() => {}

Avatar.GroupAvatar

参数	说明	类型	默认值
style	设置组件样式	Object	-
className	设置组件className	String	-
colorSets	头像背景色集，img不存在时会根据text的charCode选取其中一个作为背景色	String数组	['#BC61CF', '#F26666', '#F29A52', '#F4C329', '#CBD057', '#289ED3', '#29B3F0']
dataSource	头像群数据源，数组成员见下方，必填	Array	-
onClickMore	点击更多回调	Function	() => {}

dataSource成员

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