AvatarCircles
avatar-circles堆叠头像组 · 重叠 + ring + +N 计数(扩 Avatar·RSC)
用法
基础用法
avatars 按序堆叠（后者压前者），形成重叠头像组。
tsx
const avatars = [
{ src: "/demo/avatar-1.jpg", alt: "u1" },
{ src: "/demo/avatar-2.jpg", alt: "u2" },
{ src: "/demo/avatar-3.jpg", alt: "u3" },
{ src: "/demo/avatar-4.jpg", alt: "u4" },
];
<AvatarCircles avatars={avatars} />额外计数
extraCount 在末尾追加 “+N” 圆，表示溢出人数。
+9tsx
<AvatarCircles avatars={avatars} extraCount={9} />尺寸
size 控制圆直径与重叠间距：sm / md / lg。
+9+9+9tsx
<>
<AvatarCircles avatars={avatars} extraCount={9} size="sm" />
<AvatarCircles avatars={avatars} extraCount={9} size="md" />
<AvatarCircles avatars={avatars} extraCount={9} size="lg" />
</>何时用
紧凑展示一组参与者/成员头像（重叠堆叠 + 末尾「+N」计数）。单个头像用 [Avatar]；带名称/描述的单用户卡用 User。
导入
ts
import { AvatarCircles, avatarCirclesItemVariants } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| avatars* | AvatarCirclesItem[] | — | 头像列表（按序堆叠，后者压前者）。每项 { src: string; alt?: string }。 |
| extraCount | number | — | 额外人数，渲染为末尾 "+N" 圆。 |
| size | "sm" | "md" | "lg" | "md" | 圆直径档位。 |
| className | string | — | — |
禁忌 / 坑
- 每个
avatars项要求src（与单个 Avatar 不同，这里没有 fallback 槽）；列表项无图会留空圆。 extraCount仅渲染计数标记，不会自动从列表长度推算，按真实溢出人数手动传。
相关
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
+9<AvatarCircles avatars={avatars} extraCount={9} size="md" />