展示类 · 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 属性传入覆盖层的内容。覆盖层无默认样式。

顶部和底部 Slot

顶部

底部

额外边框

额外动效

通过 border={motion:true} 和 contentMotion 开启边框和内容区域的额外动效

头像组

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

API 参考


Avatar

属性说明类型默认值
alt图像的替代文本描述string-
border额外边框 (>=2.52.0){color?:string //颜色, motion?:boolean //是否开启动画} or boolean-
bottomSlot底部 Slot 配置 (>= 2.52.0 ){
render?: () => React.ReactNode //完全控制渲染,
shape?: "circle" or "square" // Slot 形状,
content: React.ReactNode // Slot 内容,
bgColor:string // Slot 背景色
textColor:string // 文字颜色
className:string
style?:CSSProperties
}
-
className类名string-
color指定头像的颜色,支持 amberbluecyangreengreyindigolight-bluelight-greenlimeorangepinkpurpleredtealvioletyellowstringgrey
contentMotion头像内容区域动效 (>=2.xx.0)boolean-
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-
topSlot顶部 Slot 配置 (>= 2.52.0 ){
render?: () => React.ReactNode //完全控制渲染,
gradientStart?: string // 顶部背景渐变起始色
gradientEnd?: string // 顶部背景渐变结束色
content: React.ReactNode
textColor:string //文字颜色
className: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 属性解释头像的内容。

设计变量