arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-22 16:00: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-18 11:06:26 +02:00
parent 3b5a7c5c58
commit 70b964f3a0
7 changed files with 142 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,13 +15,13 @@ Wrap multiple [Avatar](/components/avatar) within an AvatarGroup to stack them.
---
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" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" />
<UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" />
<UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" />
---
: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"}
:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac"}
:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel"}
:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter"}
::
### Size
@@ -34,13 +34,13 @@ 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" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" />
<UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" />
<UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" />
---
: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"}
:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac"}
:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel"}
:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter"}
::
### Max
@@ -53,15 +53,35 @@ 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" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" />
<UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" />
<UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" />
---
: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"}
:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac"}
:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel"}
:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter"}
::
## Examples
### With tooltip
Wrap each avatar with a [Tooltip](/components/tooltip) to display a tooltip on hover.
:component-example{name="avatar-group-tooltip-example"}
### With chip
Wrap each avatar with a [Chip](/components/chip) to display a chip around the avatar.
:component-example{name="avatar-group-chip-example"}
### With link
Wrap each avatar with a [Link](/components/link) to make them clickable.
:component-example{name="avatar-group-link-example"}
## API
### Props