ElyriAvatar
头像：图片加载失败自动回退首字母，可选形状、五档尺寸与在线状态，并含重叠的 AvatarGroup。
安装
添加组件
pnpm dlx @elyri/cli@latest add avatar示例
基础用法
传入图片显示头像，或只给 name 用首字母回退。
import { Avatar } from './components/elyri/Avatar';
export function Example() {
return (
<div className="demo-ui-row">
<Avatar src="/logo.svg" alt="Ada Lovelace" fit="contain" />
<Avatar name="Grace Hopper" />
<Avatar src="/logo.svg" alt="Alan Turing" fit="contain" />
<Avatar name="林徽因" />
</div>
);
}尺寸
五档尺寸：xs / sm / md / lg / xl。
import { Avatar } from './components/elyri/Avatar';
export function Example() {
return (
<div className="demo-ui-row">
<Avatar name="Ada" size="xs" />
<Avatar name="Ada" size="sm" />
<Avatar name="Ada" size="md" />
<Avatar src="/logo.svg" alt="Grace" size="lg" fit="contain" />
<Avatar src="/logo.svg" alt="Linus" size="xl" fit="contain" />
</div>
);
}形状
circle 为圆形，square 为圆角方形。
import { Avatar } from './components/elyri/Avatar';
export function Example() {
return (
<div className="demo-ui-row">
<Avatar src="/logo.svg" alt="Ada" shape="circle" fit="contain" />
<Avatar src="/logo.svg" alt="Ada" shape="square" fit="contain" />
<Avatar name="Grace Hopper" shape="circle" />
<Avatar name="Grace Hopper" shape="square" />
</div>
);
}在线状态
右下角状态圆点：online / away / busy / offline。
import { Avatar } from './components/elyri/Avatar';
export function Example() {
return (
<div className="demo-ui-row">
<Avatar src="/logo.svg" alt="Ada" status="online" fit="contain" />
<Avatar src="/logo.svg" alt="Alan" status="away" fit="contain" />
<Avatar src="/logo.svg" alt="Grace" status="busy" fit="contain" />
<Avatar src="/logo.svg" alt="Linus" status="offline" fit="contain" />
</div>
);
}回退内容
无 name 时显示默认人像图标，也可用 fallback 自定义。
import { Avatar } from './components/elyri/Avatar';
export function Example() {
return (
<div className="demo-ui-row">
<Avatar />
<Avatar name="A" />
<Avatar
name="A"
fallback={
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 2 3 6v6c0 5 3.8 8.5 9 10 5.2-1.5 9-5 9-10V6Z" />
</svg>
}
/>
</div>
);
}头像组
重叠排列，max 超出后折叠为 +N 计数。
+2
import { Avatar, AvatarGroup } from './components/elyri/Avatar';
export function Example() {
return (
<div className="demo-stack">
<AvatarGroup max={4} size="lg">
<Avatar src="/logo.svg" alt="Ada" fit="contain" />
<Avatar src="/logo.svg" alt="Alan" fit="contain" />
<Avatar src="/logo.svg" alt="Grace" fit="contain" />
<Avatar src="/logo.svg" alt="Linus" fit="contain" />
<Avatar name="Grace Hopper" />
<Avatar name="林徽因" />
</AvatarGroup>
<AvatarGroup size="md">
<Avatar name="Ada Lovelace" />
<Avatar name="Alan Turing" />
<Avatar name="Grace Hopper" />
</AvatarGroup>
</div>
);
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
src | string | — | 图片地址，加载失败时回退到首字母或自定义内容 |
alt | string | — | 图片替代文本，作为无障碍名称，优先于 name |
name | string | — | 用户名，用于生成首字母回退与稳定配色 |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | 尺寸：xs / sm / md / lg / xl，默认 md |
shape | 'circle' | 'square' | 'circle' | 形状：circle / square，默认 circle |
fit | 'cover' | 'contain' | 'cover' | 图片填充方式：cover 铺满裁切（默认）/ contain 缩小居中完整显示，适合 logo |
status | 'online' | 'offline' | 'away' | 'busy' | — | 右下角在线状态圆点 |
fallback | ReactNode | — | 自定义回退内容，优先级高于首字母 |
AvatarGroup.max | number | — | 最多展示的头像数量，超出显示 +N，省略则全部展示 |
...rest | HTMLAttributes | — | 其余属性透传给原生 span / div |