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

feat(Avatar): new component

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-11 15:02:50 +01:00
parent 7823139a35
commit 978595ce88
4 changed files with 149 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
playground/pages/avatar.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<div class="flex flex-col gap-2">
<div class="flex items-center gap-1.5">
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="3xs" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="2xs" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="xs" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="sm" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="md" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="lg" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="xl" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="2xl" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="3xl" />
</div>
<div class="flex items-center gap-1.5">
<UAvatar icon="i-heroicons-photo" size="3xs" />
<UAvatar icon="i-heroicons-photo" size="2xs" />
<UAvatar icon="i-heroicons-photo" size="xs" />
<UAvatar icon="i-heroicons-photo" size="sm" />
<UAvatar icon="i-heroicons-photo" size="md" />
<UAvatar icon="i-heroicons-photo" size="lg" />
<UAvatar icon="i-heroicons-photo" size="xl" />
<UAvatar icon="i-heroicons-photo" size="2xl" />
<UAvatar icon="i-heroicons-photo" size="3xl" />
</div>
<div class="flex items-center gap-1.5">
<UAvatar alt="Benjamin Canac" size="3xs" />
<UAvatar alt="Benjamin Canac" size="2xs" />
<UAvatar alt="Benjamin Canac" size="xs" />
<UAvatar alt="Benjamin Canac" size="sm" />
<UAvatar alt="Benjamin Canac" size="md" />
<UAvatar alt="Benjamin Canac" size="lg" />
<UAvatar alt="Benjamin Canac" size="xl" />
<UAvatar alt="Benjamin Canac" size="2xl" />
<UAvatar alt="Benjamin Canac" size="3xl" />
</div>
<div class="flex items-center gap-1.5">
<UAvatar fallback="+1" size="3xs" />
<UAvatar fallback="+1" size="2xs" />
<UAvatar fallback="+1" size="xs" />
<UAvatar fallback="+1" size="sm" />
<UAvatar fallback="+1" size="md" />
<UAvatar fallback="+1" size="lg" />
<UAvatar fallback="+1" size="xl" />
<UAvatar fallback="+1" size="2xl" />
<UAvatar fallback="+1" size="3xl" />
</div>
</div>
</template>