arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 08:20:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(avatar-group): update

Browse Source
This commit is contained in:
Benjamin Canac
2024-07-17 17:27:34 +02:00
parent 8ae8993db4
commit 9c56917714
5 changed files with 75 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
docs/content/3.components/avatar-group.md
View File

@@ -9,7 +9,58 @@ links:
## Usage
## Examples
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