组件 · 数据展示

Avatar 头像

用户头像：Image/Fallback/Badge/Group 等部件。

入口 @selrux/ui/avatar · 源码 src/components/avatar/index.ts · 6 个组件 · 发布状态 preview

使用建议

避免：无 Fallback 时仅依赖破碎图片
限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造

引入

tsx

12345678import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from '@selrux/ui/avatar';

演练场

调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

代码演示

基础用法

AvatarImage 加载失败或未提供时显示 AvatarFallback。

SX管OK

尺寸与徽标

size 六档；AvatarBadge 显示在线状态。

xssmmdlgxl2xl

头像组

AvatarGroup 叠放，AvatarGroupCount 显示剩余数量。

ABC+5

API

属性覆盖：示例用到 3 / 3 个自有属性（100%）

由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。

Avatar

主题化头像。

属性	说明	类型	默认值
`size`	-	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	-
`shape`	-	`"square" \| "circle"`	-
`color`	Fallback 底色角色。	`"info" \| "success" \| "warning" \| "primary" \| "destructive" \| "carbon" \| "secondary" \| "accent"`	-

另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。

AvatarBadge

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

AvatarFallback

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

AvatarGroup

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

AvatarGroupCount

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

AvatarImage

无自有属性；其余 292 项原生属性继承自 HTMLAttributes / ImgHTMLAttributes。

导出类型：AvatarBadgeProps、AvatarColor、AvatarFallbackProps、AvatarGroupCountProps、AvatarGroupProps、AvatarImageProps、AvatarProps、AvatarShape、AvatarSize