mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-20 23:11:43 +01:00
78 lines
2.3 KiB
Markdown
78 lines
2.3 KiB
Markdown
---
|
|
title: AvatarGroup
|
|
description: Stack multiple avatars in a group.
|
|
links:
|
|
- label: GitHub
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/AvatarGroup.vue
|
|
---
|
|
|
|
## Usage
|
|
|
|
Wrap multiple [Avatar](/components/avatar) within an AvatarGroup to stack them.
|
|
|
|
::component-code
|
|
---
|
|
slots:
|
|
default: |
|
|
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
|
|
<UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" />
|
|
<UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" />
|
|
---
|
|
:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac"}
|
|
:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml"}
|
|
:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook"}
|
|
::
|
|
|
|
### Size
|
|
|
|
Use the `size` prop to change the size of all the avatars.
|
|
|
|
::component-code
|
|
---
|
|
props:
|
|
size: md
|
|
slots:
|
|
default: |
|
|
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
|
|
<UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" />
|
|
<UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" />
|
|
---
|
|
:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac"}
|
|
:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml"}
|
|
:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook"}
|
|
::
|
|
|
|
### Max
|
|
|
|
Use the `max` prop to limit the number of avatars displayed. The rest will be displayed as a `+X` avatar.
|
|
|
|
::component-code
|
|
---
|
|
props:
|
|
max: 2
|
|
slots:
|
|
default: >
|
|
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
|
|
<UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" />
|
|
<UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" />
|
|
---
|
|
:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac"}
|
|
:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml"}
|
|
:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook"}
|
|
::
|
|
|
|
## API
|
|
|
|
### Props
|
|
|
|
:component-props
|
|
|
|
### Slots
|
|
|
|
:component-slots
|
|
|
|
## Theme
|
|
|
|
:component-theme
|