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? }],字段同 EwAvatar | array | [] |
| max | 直接展示上限,溢出折叠为 +N(0 表示全部展示) | number | 0 |
插槽
| 插槽 | 说明 |
|---|---|
| default | 追加自定义头像(置于折叠计数之前) |