UG666

UG666 UI
@ug666/react 文档演示

AvatarGroup 头像堆叠组

将多个头像以堆叠方式展示，超出 max 数量时末尾显示 +N 圆形气泡，适合团队成员、协作者列表等场景。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { AvatarGroup, Avatar, AvatarImage, AvatarFallback } from '@ug666/react'

5 个头像，max=3

超出 max 的 2 个头像折叠为 +2 溢出圆展示在末尾。

ABC+2

三种尺寸

sm / default / lg 适应不同密度的布局场景。

sm
ABUG李+1
default
ABUG李+1
lg
ABUG李+1

图片加载失败回退首字母

当图片 src 无效时，AvatarFallback 自动显示首字母或占位内容。

正甲乙常

代码示例

推荐在卡片底部、评论区与项目成员列表中使用。

import { AvatarGroup, Avatar, AvatarImage, AvatarFallback } from '@ug666/react'

export function TeamAvatars() {
  return (
    <AvatarGroup max={3}>
      <Avatar>
        <AvatarImage src="https://i.pravatar.cc/80?img=1" alt="成员 A" />
        <AvatarFallback>A</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="https://i.pravatar.cc/80?img=2" alt="成员 B" />
        <AvatarFallback>B</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>UG</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>李</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>张</AvatarFallback>
      </Avatar>
    </AvatarGroup>
  )
}

Props 说明

属性类型默认值说明
maxnumber5最多显示的头像数量，超出部分以 +N 形式合并展示。
size'sm' | 'default' | 'lg''default'头像尺寸，影响所有子头像与溢出圆的尺寸。
childrenReactNode必填多个 <Avatar> 节点，超出 max 的部分被收起。