UG666

UG666 UI
React 组件

UGAvatarGroup 头像堆叠组

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

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx
import { UGAvatarGroup, UGAvatar, UGAvatarImage, UGAvatarFallback } from '@ug666/ui-react'

5 个头像，max=3

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

ABC+2

三种尺寸

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

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

图片加载失败回退首字母

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

正甲乙常

代码示例

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

tsx
import { UGAvatarGroup, UGAvatar, UGAvatarImage, UGAvatarFallback } from '@ug666/ui-react'

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

Props

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