定价

AvatarGroup

Figma 源代码

将多个头像排列或叠放展示，并以数量提示收起的成员，适合团队、协作者与参与者列表。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于多个参与者头像的横向或叠放展示。联系人详情列表仍使用普通列表，不用 AvatarGroup 承载整行信息。

  • 参与排列与 +N 计数的直接子项必须声明 as="item"；用 max 限制可见数量。

  • row 的 size 表示单个头像尺寸；stack 的 size 表示组容器尺寸，不要用同一数值假定两种布局的头像大小相同。

导入

import { AvatarGroup } from '@snowui-design-system/components';

用法

尺寸

堆叠数量

API 参考

属性 类型 默认值 示例 描述
max number — max={42} 未传时 row 不限制数量，stack 最多四个位置。row 显示最多 max 个头像，另加 +N；stack 的 max 包含 +N 的位置，最多四个。显式值向下取整且不小于 0，计数文案最高为 +99。
layout AvatarGroupLayout "row" layout={value} row 为水平重叠排列；stack 为圆形堆叠，最多四个显示位置。两种模式对 size 和 max 的解释不同，见对应属性。
size ResourceSize — size={value} 12/16/20/24/28/32/40/48/80；row 表示单个头像尺寸，stack 表示组容器尺寸并按 max 推导头像大小。未传时读取父级尺寸上下文。
enableResponsive boolean true enableResponsive 启用根 Frame 的响应式能力；头像排列与溢出计数仍由 AvatarGroup 自身管理，关闭此项不会关闭溢出逻辑。
enableContext boolean true enableContext 是否为子组件（Avatar/Icon/Badge）提供尺寸上下文。
children Snippet — <AvatarGroup>Content</AvatarGroup> 按顺序提供 as="item" 的直接子元素，通常为 Avatar；这些子项参与排列、隐藏与 +N 计数，其他内容不计入。