mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
playground: consistent avatar urls
This commit is contained in:
@@ -27,7 +27,7 @@ const data = {
|
||||
<UAlert :title="data.title" :icon="data.icon" :close="data.close" />
|
||||
<UAlert :title="data.title" :icon="data.icon" :close="data.close" :actions="actions('neutral')" />
|
||||
<UAlert :title="data.title" :icon="data.icon" :close="data.close" :description="data.description" />
|
||||
<UAlert :title="data.title" :avatar="{ src: 'https://avatars.githubusercontent.com/u/739984?v=4' }" :close="data.close" :description="data.description" />
|
||||
<UAlert :title="data.title" :avatar="{ src: 'https://github.com/benjamincanac.png' }" :close="data.close" :description="data.description" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
|
||||
@@ -7,7 +7,7 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
|
||||
<template>
|
||||
<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" />
|
||||
<UAvatar v-for="size in sizes" :key="size" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" :size="size" />
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<UAvatar v-for="size in sizes" :key="size" icon="i-heroicons-photo" :size="size" />
|
||||
@@ -22,17 +22,17 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
|
||||
<div class="flex items-center gap-1.5">
|
||||
<UAvatarGroup v-for="size in sizes" :key="size" :size="size" :max="2">
|
||||
<UChip inset text="1">
|
||||
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" />
|
||||
<UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
|
||||
</UChip>
|
||||
<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" />
|
||||
<UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
|
||||
<UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
|
||||
</UAvatarGroup>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<UAvatarGroup v-for="size in sizes" :key="size" :size="size" :max="4">
|
||||
<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" />
|
||||
<UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
|
||||
<UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
|
||||
<UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
|
||||
</UAvatarGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -31,7 +31,7 @@ const items = [{
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<UChip v-for="size in sizes" :key="size" :size="size" inset text="1">
|
||||
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
|
||||
<UAvatar src="https://github.com/benjamincanac.png" />
|
||||
</UChip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@ const items = [
|
||||
[{
|
||||
label: 'My account',
|
||||
avatar: {
|
||||
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
||||
src: 'https://github.com/benjamincanac.png'
|
||||
}
|
||||
}],
|
||||
[{
|
||||
|
||||
@@ -5,7 +5,7 @@ const items = [
|
||||
[{
|
||||
label: 'My account',
|
||||
avatar: {
|
||||
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
||||
src: 'https://github.com/benjamincanac.png'
|
||||
},
|
||||
type: 'label' as const
|
||||
}],
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
</div>
|
||||
|
||||
<USeparator
|
||||
:avatar="{ src: 'https://avatars.githubusercontent.com/u/739984?v=4' }"
|
||||
:avatar="{ src: 'https://github.com/benjamincanac.png' }"
|
||||
decorative
|
||||
orientation="vertical"
|
||||
/>
|
||||
@@ -25,7 +25,7 @@
|
||||
</div>
|
||||
|
||||
<USeparator decorative orientation="vertical">
|
||||
<UAvatar size="2xs" src="https://avatars.githubusercontent.com/u/13056429?v=4" />
|
||||
<UAvatar size="2xs" src="https://github.com/sandros94.png" />
|
||||
</USeparator>
|
||||
|
||||
<div class="flex-1 text-center">
|
||||
|
||||
@@ -14,7 +14,7 @@ const size = ref('md' as const)
|
||||
const items = [{
|
||||
label: 'Tab1',
|
||||
avatar: {
|
||||
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
||||
src: 'https://github.com/benjamincanac.png'
|
||||
},
|
||||
content: 'This is the content shown for Tab1'
|
||||
}, {
|
||||
|
||||
@@ -30,13 +30,13 @@ const templates = (id: number) => [{
|
||||
title: 'Toast',
|
||||
description: `This is the toast ${id}`,
|
||||
avatar: {
|
||||
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
||||
src: 'https://github.com/benjamincanac.png'
|
||||
}
|
||||
}, {
|
||||
title: 'Toast',
|
||||
description: `This is the toast ${id}`,
|
||||
avatar: {
|
||||
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
||||
src: 'https://github.com/benjamincanac.png'
|
||||
},
|
||||
actions: [{
|
||||
label: 'Action',
|
||||
|
||||
Reference in New Issue
Block a user