头像
Avatar Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
src | string | - | 头像的主图片地址。 |
fallbackSrc | string | - | 主图片加载失败时改用的备用图片地址。 |
name | string | - | 用户名,用于生成首字母回退文字和无障碍标签。 |
alt | string | - | 头像的无障碍标签,设置后优先于 name 作为朗读文本。 |
size | AvatarSize | 'md' | 头像尺寸,支持命名尺寸或像素数值。命名尺寸见下表。 |
shape | AvatarShape | 'circle' | 头像形状,可选 circle、rounded、square。 |
命名尺寸
| 名称 | 像素值 |
|---|---|
xsm | 20px |
sm | 24px |
md | 36px |
lg | 48px |
xl | 128px |
像素尺寸
AvatarSize 类型列出了常用的像素值,便于获得类型提示和自动补全:
16 | 20 | 24 | 32 | 36 | 40 | 48 | 60 | 64 | 72 | 96 | 128 | 144 | 180
组件本身并不限制只能使用这些数值。如果传入列表外的数字,头像仍会按该像素值渲染。
Avatar 插槽
| 名称 | 说明 |
|---|---|
default | 替代默认人物图标的自定义内容。仅在无图片且无姓名时生效。 |
status | 头像角落的状态指示器,通常放置 AvatarStatusDot。 |
Avatar 事件
| 名称 | 说明 |
|---|---|
error | 主图片加载失败时触发。 |
AvatarStatusDot Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | AvatarStatusDotVariant | 'neutral' | 状态点颜色变体:neutral、info、success、warning、error。 |
原生属性
根元素为 <span>。
以下内容传入根元素:
- HTML 属性。
aria-*属性。data-*属性。class。style。