Skip to content

头像组

头像组用于将多个头像堆叠显示。

基本使用

将多个头像放置在 <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工具类头像组使用超大号尺寸

参考