展示类 · Avatar
头像
头像,支持图片或字符展示。

代码演示

如何引入

尺寸

可以通过 size 属性设置图标大小,支持`extra-extra-small(20x20),extra-small(24x24),small(32x32),default(40x40),medium(48x48),large(72x72),extra-large(128x128)`。

颜色

Avatar 支持默认色板的 15 种颜色和白色,包括:amberbluecyangreengreyindigolight-bluelight-greenlimeorangepinkpurpleredtealvioletyellow。也可以通过 style 来自定义颜色样式。默认为grey

自适应字符大小

字符类型的头像,字体大小会根据头像宽度自适应调整。使用gap调整字符头像距离左右两侧的像素大小。

图片

可以通过 src 设置图片格式的头像。

形状

Avatar 支持 circlesquare 两种形状,默认为 circle

事件

Avatar 支持 onClickonMouseEnteronMouseLeave。其中 hover 状态下可以通过 hoverMask 属性传入覆盖层的内容。覆盖层无默认样式。

头像组

可以通过 AvatarGroup 将 avatar 显示为组。
可以通过 maxCount 设置展示的头像数量。
可以通过 renderMore 自定义 more 标签。
可以通过 overlapFrom 控制头像组的覆盖方式。可选值有 startend,分别表示左边覆盖右边和右边覆盖左边。默认值为 start

API 参考


Avatar

属性说明类型默认值
alt图像的替代文本描述string-
className类名string-
color指定头像的颜色,支持 amberbluecyangreengreyindigolight-bluelight-greenlimeorangepinkpurpleredtealvioletyellowstringgrey
hoverMaskhover 时头像内容覆盖层ReactNode-
gap字符头像距离左右两侧的像素大小number3
imgAttr原生 img 属性 >=1.5.0React.ImgHTMLAttributes<HTMLImageElement>-
shape指定头像的形状,支持 circlesquarestringcircle
size设置头像的大小,支持 extra-extra-smallextra-smallsmalldefaultmediumlargeextra-largestringmedium
src图片类头像的资源地址string-
srcSet设置图片类头像响应式资源地址string-
style样式名CSSProperties-
onClick单击头像的回调(e: Event) => void-
onError图片加载失败的事件,返回 false 会关闭组件默认的 fallback 行为(e: Event) => boolean-
onMouseEnterMouseEnter 事件的回调(e: Event) => void-
onMouseLeaveMouseLeave 事件的回调(e: Event) => void-

AvatarGroup

属性说明类型默认值
maxCount最大数量限制,超出后显示+Nnumber-
overlapFrom设置头像覆盖方向,支持 start, endstringstart
renderMore自定义渲染 more 标签(restNumber: number, restAvatars: ReactNode[]) => ReactNode-
shape指定头像的形状,支持circlesquarestringcircle
size设置头像的大小,支持 extra-extra-small, extra-smallsmalldefaultmediumlargeextra-largestringmedium

Accessibility

  • Avatar 一般不用于操作,不需要被获取焦点。但当 Avatar 可以被点击操作时(如:Semi 官网上方的头像)需要被聚焦,并响应键盘 Enter 事件。
  • 当 Avatar 与其他组件结合使用时,需要同时检查该组件的可访问性指南。
  • Avatar的alt属性可以被屏幕阅读器读取,使用头像组件时,请使用alt 属性解释头像的内容。

设计变量