头像组
头像组用于将多个头像堆叠显示。
基本使用
将多个头像放置在 <div class="avatar-group">
内即可创建一个头像组。





+10
尺寸
当使用不同大小的头像时,可以通过为 .avatar-group
添加同样等级的 size-*
辅助类已获得统一的堆叠间距。















堆叠间距
使用工具类 gap-*
来调整堆叠间距。默认间距等同于 gap-2.5
,小于 2.5
将使得间距比默认间距更小,反之则更大。


0


1


2


2.5


3


3.5
CSS 类
头像组提供了如下 CSS 类:
类 | 类型 | 作用 |
---|---|---|
avatar-group | 实体类 | 元素作为头像组组件 |
size-xs | 工具类 | 头像组使用超小号尺寸 |
size-sm | 工具类 | 头像组使用小号尺寸 |
size-lg | 工具类 | 头像组使用大号尺寸 |
size-xl | 工具类 | 头像组使用超大号尺寸 |