Files
ui/playground/pages/avatar.vue
Benjamin Canac 9a42fa415f chore: add eol
2024-03-13 16:58:11 +01:00

49 lines
2.5 KiB
Vue

<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 text="+1" size="3xs" />
<UAvatar text="+1" size="2xs" />
<UAvatar text="+1" size="xs" />
<UAvatar text="+1" size="sm" />
<UAvatar text="+1" size="md" />
<UAvatar text="+1" size="lg" />
<UAvatar text="+1" size="xl" />
<UAvatar text="+1" size="2xl" />
<UAvatar text="+1" size="3xl" />
</div>
</div>
</template>