Avatar

Avatar types

Avatars provide 3 different types of avatars: icon avatars, picture avatars, and character avatars

W

Avatar shape

Avatars support two shapes by default: shape, circle, and users can also customize the avatar shape

W
W

Avatar size

Avatars support three sizes by default: small, medium, and large, and the user can customize the size

W
W
W
W
W
W
W
W

Character avatar size adaptive

Avatars support character adaptation, which means that when the character length is too long, the avatar automatically adjusts the characters to render the full content

王亿
王亿亿

Combine avatar

Combine avatars to show

W
W

Combine avatar offset directions

Combine avatars to control the direction of the cascade

W
W

The number of combined avatars

Combine avatars to set the maximum number of impressions, and hide the display if you exceed them

Avatar
+1
Avatar
Avatar
more

Avatar Props

nametypedefaultdescriptionrequired
altString-show it when url is not validN
contentString / Slot / Function-content slot or props.content。Typescript:string | TNodesee more ts definitionN
defaultString / Slot / Function-default slot or props.default, same as content。Typescript:string | TNodesee more ts definitionN
hideOnLoadFailedBooleanfalsehide image when loading image failedN
iconSlot / Function-use icon to fill。Typescript:TNodesee more ts definitionN
imageString-images urlN
imagePropsObject-Typescript:ImagePropsImage API Documentssee more ts definitionN
shapeStringcircleshape。options:circle/round。Typescript:ShapeEnum type ShapeEnum = 'circle' | 'round'see more ts definitionN
sizeString-sizeN
onErrorFunctionTypescript:(context: { e: Event }) => void
trigger on image load failed
N

Avatar Events

nameparamsdescription
error(context: { e: Event })trigger on image load failed

AvatarGroup Props

nametypedefaultdescriptionrequired
cascadingString'right-up'multiple images cascading。options:left-up/right-up。Typescript:CascadingValue type CascadingValue = 'left-up' | 'right-up'see more ts definitionN
collapseAvatarString / Slot / Function-Typescript:string | TNodesee more ts definitionN
maxNumber--N
popupPropsObject-Typescript:PopupPropsPopup API Documentssee more ts definitionN
sizeStringmediumsizeN

何时使用

需要展示用户的个性化信息、或者站点、项目、作品等的识别标示。

组件搭配使用

与导航组合使用,通常会搭配单行文字或单个图标,用于识别身份信息、登录信息。
与列表组合使用,可搭配多行文字,用于展示结构化的成员名称及信息,方便快速识别。
可与徽标数字组合展示,可作为消息提示或人员数量提示等。

常见用法

多个头像可组合展示构成头像组,叠加展示。当页面布局空间有限,超过可外显个数时候,可将重复性较高的头像信息做隐藏收起,需要时再让用户主动触发查看。
图示:多个头像组合
图示:当超过外显个数时,可使用浮窗展示完整的头像列表

推荐/慎用示例

对于字符型头像,需要根据场景定义最大字符数,避免字符过多影响可读性,降低可识别度。

使用多个头像组合时,需根据场景和信息类型定义最长数量,避免数值过多影响可读性,降低使用效率。

当需要点击头像进行操作时,应使用操作按钮,且放置在头像组合上,避免将行动按钮放置在组合下方造成点击不便,表意不明。
  • circle
  • round