ui-avatar-group 头像组组件

版本：v2.3.11

头像组组件，用于展示多个头像的堆叠效果

基本使用

<template>
  <view class="avatar-group-demo">
    <ui-avatar-group>
      <ui-avatar src="https://example.com/avatar1.jpg" />
      <ui-avatar src="https://example.com/avatar2.jpg" />
      <ui-avatar src="https://example.com/avatar3.jpg" />
    </ui-avatar-group>
  </view>
</template>

<script setup>
</script>

<style scoped>
.avatar-group-demo {
  padding: 20px;
}
</style>

Props

参数	类型	默认值	说明
marginLeft	String\|Number	28	头像之间的左边距（负值表示重叠）
rtl	Boolean	false	是否从右到左排列

Slots

名称	说明
default	头像组内容，放置多个 ui-avatar 组件

示例

基本头像组

<template>
  <view class="avatar-group-demo">
    <ui-avatar-group>
      <ui-avatar text="A" />
      <ui-avatar text="B" />
      <ui-avatar text="C" />
      <ui-avatar text="D" />
    </ui-avatar-group>
  </view>
</template>

自定义间距

<template>
  <view class="avatar-group-demo">
    <view class="ui-title">默认间距</view>
    <ui-avatar-group>
      <ui-avatar text="A" />
      <ui-avatar text="B" />
      <ui-avatar text="C" />
    </ui-avatar-group>
    
    <view class="ui-title margin-t-20">更大间距</view>
    <ui-avatar-group :marginLeft="-40">
      <ui-avatar text="A" />
      <ui-avatar text="B" />
      <ui-avatar text="C" />
    </ui-avatar-group>
    
    <view class="ui-title margin-t-20">更小间距</view>
    <ui-avatar-group :marginLeft="-15">
      <ui-avatar text="A" />
      <ui-avatar text="B" />
      <ui-avatar text="C" />
    </ui-avatar-group>
  </view>
</template>

从右到左排列

<template>
  <view class="avatar-group-demo">
    <ui-avatar-group :rtl="true">
      <ui-avatar text="A" />
      <ui-avatar text="B" />
      <ui-avatar text="C" />
      <ui-avatar text="D" />
    </ui-avatar-group>
  </view>
</template>

混合使用

<template>
  <view class="avatar-group-demo">
    <ui-avatar-group :marginLeft="-35">
      <ui-avatar src="https://example.com/avatar1.jpg" />
      <ui-avatar text="用户" type="primary" />
      <ui-avatar icon="icon-user" type="success" />
      <ui-avatar text="+5" type="warning" />
    </ui-avatar-group>
  </view>
</template>

平台兼容

平台	支持情况
H5	✅
微信小程序	✅
支付宝小程序	✅
百度小程序	✅
字节跳动小程序	✅
QQ小程序	✅
APP	✅

注意事项

1. marginLeft 使用负值可以实现头像重叠效果
2. rtl 为 true 时，头像从右到左排列
3. 建议在头像组中使用相同尺寸的头像以获得最佳视觉效果
4. 头像的层级会自动叠加，后面的头像会显示在前面的头像之上

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/base/avatar/avatar