Skip to content

Avatar 头像

用于展示用户或对象头像,支持文字占位与图片两种形态。

基础用法

文字头像

文字头像取内容首字符渲染;无任何内容时显示 ? 占位。

尺寸

尺寸变体

图片头像

图片头像

头像组

头像组

多个 oas-avataroas-avatar-group 包裹后按顺序向左重叠陈列。

最大展示数

设置 max 后超出部分隐藏,末尾显示 +N 计数圆点。

统一尺寸

size 统一组内所有头像尺寸(px),无需逐个设置;配合 max 时,+N 计数圆点同步适配尺寸。

统一尺寸 size

徽标角标

badge 在头像右上角叠加徽标(文本或布尔);布尔形式(无值)显示小圆点;badge-dot 强制圆点变体;badge-color 切换彩色;badge-placement 可将角标放到右下角。

文字徽标

圆点徽标

位置与图片头像

加载失败回退

图片加载失败时自动回退到占位:优先 fallback 命名插槽内容,其次内容首字符,最后 ?

失败回退到首字符

自定义 fallback 插槽

!

空态兜底

无内容兜底

API

oas-avatar

属性说明类型默认值
alt图片替代文本
badge头像右上角叠加的徽标文本;布尔形式(无值)显示小圆点string
badge-color徽标颜色:primary/success/warning/dangerstringdanger
badge-dot小圆点徽标变体(不显示文本)boolean
badge-placement徽标位置:top-right(默认)/bottom-rightstringtop-right
size头像尺寸(px)string32
src图片地址,存在时渲染图片头像string
名称说明
fallback图片加载失败(或头像无内容)时的自定义占位内容

oas-avatar-group

属性说明类型默认值
max最大展示头像数,超出显示 +N 计数圆点string
size统一头像尺寸(px),计数圆点同步适配string
名称说明
默认

基于 MIT OR Apache-2.0 双许可发布