Avatar

Used to represent users or objects, supporting images, text, or icons.

Basic Usage

Avatar supports three types: image, text, and icon.

const avatarURL = 'https://wot-ui.cn/assets/panda.jpg'

<wd-avatar :src="avatarURL" />
<wd-avatar text="U" />
<wd-avatar icon="user" />

Shape

Use the shape prop to set the avatar shape, supports round and square, default is round.

<wd-avatar :src="avatarURL" shape="square" />
<wd-avatar :src="avatarURL" shape="round" />

Size

Supports preset sizes: large, medium, normal, small, default is normal. Also supports passing a number or string with units (like 40px, 100rpx) for custom sizes.

<!-- Preset Sizes -->
<wd-avatar :src="avatarURL" size="large" />
<wd-avatar :src="avatarURL" size="medium" />
<wd-avatar :src="avatarURL" size="normal" />
<wd-avatar :src="avatarURL" size="small" />

<!-- Custom Sizes -->
<wd-avatar :src="avatarURL" :size="80" />
<wd-avatar :src="avatarURL" size="60px" />
<wd-avatar :src="avatarURL" size="100rpx" />

Custom Color

Use bg-color and color props to customize background and text colors.

<wd-avatar bg-color="#DC143C" color="#fff" text="W" />
<wd-avatar bg-color="#228B22" color="#fff" text="O" />
<wd-avatar bg-color="#1E90FF" color="#fff" text="T" />
<wd-avatar bg-color="#EEEEEE" color="#7B8198" icon="user" />

Avatar with Badge

Display badge with Badge component.

<wd-badge modelValue="10" type="primary">
  <wd-avatar :src="avatarURL" shape="square" />
</wd-badge>
<wd-badge modelValue="20" type="danger">
  <wd-avatar :src="avatarURL" shape="square" />
</wd-badge>
<wd-badge is-dot>
  <wd-avatar :src="avatarURL" shape="square" />
</wd-badge>
<wd-badge is-dot>
  <wd-avatar text="A" shape="square" bg-color="#1E90FF" />
</wd-badge>

Custom Content

Use the default slot to customize avatar content.

<wd-avatar>
  <view class="custom-content">VIP</view>
</wd-avatar>
<wd-avatar>
  <wd-icon name="star-on" size="24px" color="#f0883a" />
</wd-avatar>

Clickable

Implement click functionality by listening to the click event.

<wd-avatar :src="avatarURL" @click="handleClick" />
<wd-avatar text="Click" bg-color="#1E90FF" @click="handleClick" />

import { useToast } from '@/uni_modules/wot-design-uni'

const toast = useToast()

const handleClick = () => {
  toast.show('Avatar clicked')
}

Avatar Group

Use wd-avatar-group component to display a group of avatars.

Basic Usage

<wd-avatar-group>
  <wd-avatar :src="avatarURL" />
  <wd-avatar icon="star-on" />
  <wd-avatar text="A" bg-color="#1E90FF" />
  <wd-avatar text="B" bg-color="#228B22" />
</wd-avatar-group>

Max Count

Use max-count prop to limit the number of displayed avatars, excess avatars will be shown as +N.

<wd-avatar-group :max-count="3">
  <wd-avatar :src="avatarURL" />
  <wd-avatar icon="star-on" />
  <wd-avatar text="A" bg-color="#1E90FF" />
  <wd-avatar text="B" bg-color="#228B22" />
  <wd-avatar text="C" bg-color="#DC143C" />
</wd-avatar-group>

Cascading Direction

Use cascading prop to set the cascading direction, supports left-up (left avatars on top) and right-up (right avatars on top).

<wd-avatar-group cascading="left-up" :max-count="4">
  <wd-avatar :src="avatarURL" />
  <wd-avatar icon="star-on" />
  <wd-avatar text="A" bg-color="#1E90FF" />
  <wd-avatar text="B" bg-color="#228B22" />
  <wd-avatar text="C" bg-color="#DC143C" />
</wd-avatar-group>

<wd-avatar-group cascading="right-up" :max-count="4">
  <wd-avatar :src="avatarURL" />
  <wd-avatar icon="star-on" />
  <wd-avatar text="A" bg-color="#1E90FF" />
  <wd-avatar text="B" bg-color="#228B22" />
  <wd-avatar text="C" bg-color="#DC143C" />
</wd-avatar-group>

Unified Size and Shape

Use size and shape props to uniformly set the size and shape of all avatars in the group. Use max-count to limit the number of displayed avatars, and excess avatars will show a collapsed avatar. Customize the collapsed avatar text using collapse-avatar.

<!-- Unified Size -->
<wd-avatar-group size="large" :max-count="3">
  <wd-avatar :src="avatarURL" />
  <wd-avatar icon="star-on" />
  <wd-avatar text="A" bg-color="#1E90FF" />
  <wd-avatar text="B" bg-color="#228B22" />
</wd-avatar-group>

<!-- Unified Shape with Custom Collapse Text -->
<wd-avatar-group shape="square" :max-count="3" :collapse-avatar="'+N'">
  <wd-avatar :src="avatarURL" />
  <wd-avatar icon="star-on" />
  <wd-avatar text="A" bg-color="#1E90FF" />
  <wd-avatar text="B" bg-color="#228B22" />
</wd-avatar-group>

Avatar Attributes

Name	Description	Type	Accepted Values	Default	Version
src	Image URL	string	-	-	1.14.0
text	Text content	string	-	-	1.14.0
icon	Icon name, using wd-icon component	string	-	-	1.14.0
size	Avatar size, supports preset sizes or strings with units	string | number	large / medium / normal / small	normal	1.14.0
shape	Avatar shape	string	round / square	round	1.14.0
bg-color	Background color	string	-	-	1.14.0
color	Text color	string	-	-	1.14.0
alt	Placeholder text when image fails to load	string	-	-	1.14.0
mode	Image fill mode, same as uni-app image component's mode	string	-	aspectFill	1.14.0

Avatar Events

Event Name	Description	Parameters	Version
click	Triggered when avatar is clicked	-	1.14.0
error	Triggered when image fails to load	event	1.14.0

Avatar Slots

Name	Description	Version
default	Custom avatar content	1.14.0

Avatar External Classes

Class Name	Description	Version
custom-class	Root node style	1.14.0
custom-style	Root node style	1.14.0

AvatarGroup Attributes

Name	Description	Type	Accepted Values	Default	Version
max-count	Maximum display count	number	-	-	1.14.0
cascading	Cascading direction	string	left-up / right-up	-	1.14.0
shape	Uniform avatar shape	string	round / square	round	1.14.0
size	Uniform avatar size	string | number	large / medium / normal / small	normal	1.14.0
collapse-avatar	Collapsed avatar content when exceeds maximum count	string	-	-	1.14.0

AvatarGroup Slots

Name	Description	Version
default	Avatar list, place wd-avatar components	1.14.0

AvatarGroup External Classes

Class Name	Description	Version
custom-class	Root node style	1.14.0
custom-style	Root node style	1.14.0

Source Code

Documentation

• Component