Skip to content
双端兼容 · 桌面 + 移动

AvatarGroup 头像组

EwAvatarGroup 将多个头像层叠排布,用于团队成员、协作者与参与用户等群体展示。 超过 max 数量时自动折叠为 +N 计数;层叠缝隙带页面底色描边,明暗主题下都干净。

基础用法

层叠与溢出折叠
max 控制直接展示的数量,剩余折叠为 +N。
林一ALWe+1
vue
<EwAvatarGroup :items="team" :max="3" />
<EwAvatarGroup :items="[{ icon: 'github' }, { icon: 'vue' }]" />

搭配文字

信任背书位
常与一句说明并置,用于落地页的信任背书。
林一AdWeMi+1
已有 12,800+ 位创作者加入
vue
<EwAvatarGroup :items="users" :max="4" />
<span>已有 12,800+ 位创作者加入</span>

API

Props

属性说明类型默认值
items头像项 [{ src?, name?, icon?, alt? }],字段同 EwAvatararray[]
max直接展示上限,溢出折叠为 +N(0 表示全部展示)number0

插槽

插槽说明
default追加自定义头像(置于折叠计数之前)

基于 MIT 许可证发布