AvatarGroup
Stack multiple avatars in a group.
Usage
Wrap multiple Avatar within an AvatarGroup to stack them.
<template>
<PAvatarGroup>
<PAvatar src="https://github.com/praburangki.png" alt="praburangki" />
<PAvatar src="https://github.com/wahyu-ivan.png" alt="Wahyu Ivan" />
<PAvatar src="https://github.com/GunawanAhmad.png" alt="Gunawan Ahmad" />
</PAvatarGroup>
</template>
Size
Use the size prop to change the size of all the avatars.
<template>
<PAvatarGroup size="xl">
<PAvatar src="https://github.com/praburangki.png" alt="praburangki" />
<PAvatar src="https://github.com/wahyu-ivan.png" alt="Wahyu Ivan" />
<PAvatar src="https://github.com/GunawanAhmad.png" alt="Gunawan Ahmad" />
</PAvatarGroup>
</template>
Max
Use the max prop to limit the number of avatars displayed. The rest is displayed as an +X avatar.
+1
<template>
<PAvatarGroup :max="2">
<PAvatar src="https://github.com/praburangki.png" alt="praburangki" />
<PAvatar src="https://github.com/wahyu-ivan.png" alt="Wahyu Ivan" />
<PAvatar src="https://github.com/GunawanAhmad.png" alt="Gunawan Ahmad" />
</PAvatarGroup>
</template>
Examples
With tooltip
Wrap each avatar with a Tooltip to display a tooltip on hover.
<template>
<PAvatarGroup>
<PTooltip text="praburangki">
<PAvatar
src="https://github.com/praburangki.png"
alt="praburangki"
/>
</PTooltip>
<PTooltip text="wahyu-ivan">
<PAvatar
src="https://github.com/wahyu-ivan.png"
alt="Wahyu Ivan"
/>
</PTooltip>
<PTooltip text="GunawanAhmad">
<PAvatar
src="https://github.com/GunawanAhmad.png"
alt="Gunawan Ahmad"
/>
</PTooltip>
</PAvatarGroup>
</template>
With chip
Wrap each avatar with a Chip to display a chip around the avatar.
<template>
<PAvatarGroup>
<PAvatar
src="https://github.com/praburangki.png"
alt="praburangki"
:chip="{ inset: true, color: 'success' }"
/>
<PAvatar
src="https://github.com/wahyu-ivan.png"
alt="Wahyu Ivan"
:chip="{ inset: true, color: 'warning' }"
/>
<PAvatar
src="https://github.com/GunawanAhmad.png"
alt="Gunawan Ahmad"
:chip="{ inset: true, color: 'error' }"
/>
</PAvatarGroup>
</template>
With link
Wrap each avatar with a Link to make them clickable.
<template>
<PAvatarGroup>
<PLink
to="https://github.com/praburangki"
target="_blank"
class="hover:ring-primary transition"
raw
>
<PAvatar
src="https://github.com/praburangki.png"
alt="praburangki"
/>
</PLink>
<PLink
to="https://github.com/wahyu-ivan"
target="_blank"
class="hover:ring-primary transition"
raw
>
<PAvatar
src="https://github.com/wahyu-ivan.png"
alt="Wahyu Ivan"
/>
</PLink>
<PLink
to="https://github.com/GunawanAhmad"
target="_blank"
class="hover:ring-primary transition"
raw
>
<PAvatar
src="https://github.com/GunawanAhmad.png"
alt="Gunawan Ahmad"
/>
</PLink>
</PAvatarGroup>
</template>
With mask
Wrap an avatar with a CSS mask to display it with a custom shape.
<template>
<PAvatarGroup :pohon="{ base: 'rounded-none squircle' }">
<PAvatar
src="https://github.com/praburangki.png"
alt="praburangki"
class="squircle rounded-none"
/>
<PAvatar
src="https://github.com/wahyu-ivan.png"
alt="Wahyu Ivan"
class="squircle rounded-none"
/>
<PAvatar
src="https://github.com/GunawanAhmad.png"
alt="Gunawan Ahmad"
class="squircle rounded-none"
/>
</PAvatarGroup>
</template>
<style>
.squircle {
mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e");
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
}
</style>
The
chip prop does not work correctly when using a mask. Chips may be cut depending on the mask shape.API
Props
| Prop | Default | Type |
|---|
Slots
| Slot | Type |
|---|
Theme
We use unocss-variants to customize the theme. Read more about it in the theming guide.
Below is the theme configuration skeleton for the PAvatarGroup. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
app.config.ts
export default defineAppConfig({
pohon: {
avatarGroup: {
slots: {
root: '',
base: ''
},
variants: {
size: {
'3xs': {
base: ''
},
'2xs': {
base: ''
},
xs: {
base: ''
},
sm: {
base: ''
},
md: {
base: ''
},
lg: {
base: ''
},
xl: {
base: ''
},
'2xl': {
base: ''
},
'3xl': {
base: ''
}
}
},
defaultVariants: {
size: 'md'
}
}
}
};
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
avatarGroup: {
slots: {
root: '',
base: ''
},
variants: {
size: {
'3xs': {
base: ''
},
'2xs': {
base: ''
},
xs: {
base: ''
},
sm: {
base: ''
},
md: {
base: ''
},
lg: {
base: ''
},
xl: {
base: ''
},
'2xl': {
base: ''
},
'3xl': {
base: ''
}
}
},
defaultVariants: {
size: 'md'
}
}
}
};
Changelog
No recent changes