AvatarGroup
Stack multiple avatars in a group.
Usage
Wrap multiple Avatar within an AvatarGroup to stack them.
<template>
<UAvatarGroup>
<UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
<UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
<UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
</UAvatarGroup>
</template>
Size
Use the size prop to change the size of all the avatars.
<template>
<UAvatarGroup size="xl">
<UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
<UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
<UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
</UAvatarGroup>
</template>
Max
Use the max prop to limit the number of avatars displayed. The rest is displayed as an +X avatar.
+1
<template>
<UAvatarGroup :max="2">
<UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
<UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
<UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
</UAvatarGroup>
</template>
Examples
With tooltip
Wrap each avatar with a Tooltip to display a tooltip on hover.
<template>
<UAvatarGroup>
<UTooltip text="benjamincanac">
<UAvatar
src="https://github.com/benjamincanac.png"
alt="Benjamin Canac"
/>
</UTooltip>
<UTooltip text="romhml">
<UAvatar
src="https://github.com/romhml.png"
alt="Romain Hamel"
/>
</UTooltip>
<UTooltip text="noook">
<UAvatar
src="https://github.com/noook.png"
alt="Neil Richter"
/>
</UTooltip>
</UAvatarGroup>
</template>
With chip
Wrap each avatar with a Chip to display a chip around the avatar.
<template>
<UAvatarGroup>
<UAvatar
src="https://github.com/benjamincanac.png"
alt="Benjamin Canac"
:chip="{ inset: true, color: 'success' }"
/>
<UAvatar
src="https://github.com/romhml.png"
alt="Romain Hamel"
:chip="{ inset: true, color: 'warning' }"
/>
<UAvatar
src="https://github.com/noook.png"
alt="Neil Richter"
:chip="{ inset: true, color: 'error' }"
/>
</UAvatarGroup>
</template>
With link
Wrap each avatar with a Link to make them clickable.
<template>
<UAvatarGroup>
<ULink
to="https://github.com/benjamincanac"
target="_blank"
class="hover:ring-primary transition"
raw
>
<UAvatar
src="https://github.com/benjamincanac.png"
alt="Benjamin Canac"
/>
</ULink>
<ULink
to="https://github.com/romhml"
target="_blank"
class="hover:ring-primary transition"
raw
>
<UAvatar
src="https://github.com/romhml.png"
alt="Romain Hamel"
/>
</ULink>
<ULink
to="https://github.com/noook"
target="_blank"
class="hover:ring-primary transition"
raw
>
<UAvatar
src="https://github.com/noook.png"
alt="Neil Richter"
/>
</ULink>
</UAvatarGroup>
</template>
With mask
Wrap an avatar with a CSS mask to display it with a custom shape.
<template>
<UAvatarGroup :ui="{ base: 'rounded-none squircle' }">
<UAvatar
src="https://github.com/benjamincanac.png"
alt="Benjamin Canac"
class="rounded-none squircle"
/>
<UAvatar
src="https://github.com/romhml.png"
alt="Romain Hamel"
class="rounded-none squircle"
/>
<UAvatar
src="https://github.com/noook.png"
alt="Neil Richter"
class="rounded-none squircle"
/>
</UAvatarGroup>
</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 |
|---|---|---|
as |
|
The element or component this component should render as. |
size |
|
|
max |
The maximum number of avatars to display. | |
ui |
|
Slots
| Slot | Type |
|---|---|
default |
|
Theme
app.config.ts
export default defineAppConfig({
ui: {
avatarGroup: {
slots: {
root: 'inline-flex flex-row-reverse justify-end',
base: 'relative rounded-full ring-bg first:me-0'
},
variants: {
size: {
'3xs': {
base: 'ring -me-0.5'
},
'2xs': {
base: 'ring -me-0.5'
},
xs: {
base: 'ring -me-0.5'
},
sm: {
base: 'ring-2 -me-1.5'
},
md: {
base: 'ring-2 -me-1.5'
},
lg: {
base: 'ring-2 -me-1.5'
},
xl: {
base: 'ring-3 -me-2'
},
'2xl': {
base: 'ring-3 -me-2'
},
'3xl': {
base: 'ring-3 -me-2'
}
}
},
defaultVariants: {
size: 'md'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
avatarGroup: {
slots: {
root: 'inline-flex flex-row-reverse justify-end',
base: 'relative rounded-full ring-bg first:me-0'
},
variants: {
size: {
'3xs': {
base: 'ring -me-0.5'
},
'2xs': {
base: 'ring -me-0.5'
},
xs: {
base: 'ring -me-0.5'
},
sm: {
base: 'ring-2 -me-1.5'
},
md: {
base: 'ring-2 -me-1.5'
},
lg: {
base: 'ring-2 -me-1.5'
},
xl: {
base: 'ring-3 -me-2'
},
'2xl': {
base: 'ring-3 -me-2'
},
'3xl': {
base: 'ring-3 -me-2'
}
}
},
defaultVariants: {
size: 'md'
}
}
}
})
]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
ui: {
avatarGroup: {
slots: {
root: 'inline-flex flex-row-reverse justify-end',
base: 'relative rounded-full ring-bg first:me-0'
},
variants: {
size: {
'3xs': {
base: 'ring -me-0.5'
},
'2xs': {
base: 'ring -me-0.5'
},
xs: {
base: 'ring -me-0.5'
},
sm: {
base: 'ring-2 -me-1.5'
},
md: {
base: 'ring-2 -me-1.5'
},
lg: {
base: 'ring-2 -me-1.5'
},
xl: {
base: 'ring-3 -me-2'
},
'2xl': {
base: 'ring-3 -me-2'
},
'3xl': {
base: 'ring-3 -me-2'
}
}
},
defaultVariants: {
size: 'md'
}
}
}
})
]
})
Changelog
No recent changes