mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-22 07:50:36 +01:00
docs(avatar-group): update
This commit is contained in:
Benjamin Canac
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<UAvatarGroup>
|
||||
<UChip inset color="green">
|
||||
<UAvatar
|
||||
src="https://avatars.githubusercontent.com/u/739984?v=4"
|
||||
alt="Benjamin Canac"
|
||||
/>
|
||||
</UChip>
|
||||
<UChip inset color="amber">
|
||||
<UAvatar
|
||||
src="https://avatars.githubusercontent.com/u/25613751?v=4"
|
||||
alt="Romain Hamel"
|
||||
/>
|
||||
</UChip>
|
||||
<UChip inset color="red">
|
||||
<UAvatar
|
||||
src="https://avatars.githubusercontent.com/u/19751938?v=4"
|
||||
alt="Neil Richter"
|
||||
/>
|
||||
</UChip>
|
||||
</UAvatarGroup>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<UAvatarGroup>
|
||||
<ULink
|
||||
to="https://github.com/benjamincanac"
|
||||
target="_blank"
|
||||
class="hover:ring-primary-500 dark:hover:ring-primary-400 transition"
|
||||
raw
|
||||
>
|
||||
<UAvatar
|
||||
src="https://avatars.githubusercontent.com/u/739984?v=4"
|
||||
alt="Benjamin Canac"
|
||||
/>
|
||||
</ULink>
|
||||
<ULink
|
||||
to="https://github.com/romhml"
|
||||
target="_blank"
|
||||
class="hover:ring-primary-500 dark:hover:ring-primary-400 transition"
|
||||
raw
|
||||
>
|
||||
<UAvatar
|
||||
src="https://avatars.githubusercontent.com/u/25613751?v=4"
|
||||
alt="Romain Hamel"
|
||||
/>
|
||||
</ULink>
|
||||
<ULink
|
||||
to="https://github.com/noook"
|
||||
target="_blank"
|
||||
class="hover:ring-primary-500 dark:hover:ring-primary-400 transition"
|
||||
raw
|
||||
>
|
||||
<UAvatar
|
||||
src="https://avatars.githubusercontent.com/u/19751938?v=4"
|
||||
alt="Neil Richter"
|
||||
/>
|
||||
</ULink>
|
||||
</UAvatarGroup>
|
||||
</template>
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<UAvatarGroup>
|
||||
<UTooltip text="benjamincanac">
|
||||
<UAvatar
|
||||
src="https://avatars.githubusercontent.com/u/739984?v=4"
|
||||
alt="Benjamin Canac"
|
||||
/>
|
||||
</UTooltip>
|
||||
<UTooltip text="romhml">
|
||||
<UAvatar
|
||||
src="https://avatars.githubusercontent.com/u/25613751?v=4"
|
||||
alt="Romain Hamel"
|
||||
/>
|
||||
</UTooltip>
|
||||
<UTooltip text="noook">
|
||||
<UAvatar
|
||||
src="https://avatars.githubusercontent.com/u/19751938?v=4"
|
||||
alt="Neil Richter"
|
||||
/>
|
||||
</UTooltip>
|
||||
</UAvatarGroup>
|
||||
</template>
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user