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

feat(AvatarGroup): new component (#71)

Browse Source 
Co-authored-by: Romain Hamel <romain@boilr.io>
This commit is contained in:
Benjamin Canac
2024-04-26 17:04:49 +02:00
committed by GitHub
parent 26bfdfc54d
commit def5f7c10b
14 changed files with 280 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
playground/pages/avatar.vue
View File

@@ -5,7 +5,7 @@ const sizes = Object.keys(theme.variants.size)
</script>
<template>
<div class="flex flex-col gap-2">
<div class="flex flex-col gap-2 items-center">
<div class="flex items-center gap-1.5">
<UAvatar v-for="size in sizes" :key="size" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" :size="(size as any)" />
</div>
@@ -18,5 +18,22 @@ const sizes = Object.keys(theme.variants.size)
<div class="flex items-center gap-1.5">
<UAvatar v-for="size in sizes" :key="size" :text="size" :size="(size as any)" />
</div>
<div class="flex items-center gap-1.5">
<UAvatarGroup v-for="size in sizes" :key="size" :text="size" :size="(size as any)" :max="2">
<UChip inset text="1">
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
</UChip>
<UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
<UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
</UAvatarGroup>
</div>
<div class="flex items-center gap-1.5">
<UAvatarGroup v-for="size in sizes" :key="size" :text="size" :size="(size as any)" :max="4">
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
<UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
<UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
</UAvatarGroup>
</div>
</div>
</template>

2
playground/pages/chip.vue
View File

@@ -31,7 +31,7 @@ const items = [{
<div class="flex items-center gap-2">
<UChip v-for="size in sizes" :key="size" :size="(size as any)" inset text="1">
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" :size="(size as any)" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
</UChip>
</div>
</div>