arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-02-03 05:37:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Button): handle avatar prop

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-17 17:09:59 +02:00
parent 716ed10068
commit a54c3e49fe
7 changed files with 131 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
playground/app/pages/components/button.vue
View File

@@ -32,10 +32,15 @@ function onClick() {
</UButton>
</div>
<div class="flex items-center gap-2">
<UButton loading-auto @click="onClick">
<UButton loading>
Loading
</UButton>
</div>
<div class="flex items-center gap-2">
<UButton loading-auto @click="onClick">
Loading auto
</UButton>
</div>
<div class="flex items-center gap-2">
<UButton loading trailing>
Loading
@@ -54,12 +59,25 @@ function onClick() {
color="neutral"
/>
</div>
<div class="flex items-center gap-2">
<UButton
v-for="variant in variants"
:key="variant"
:avatar="{ src: 'https://github.com/benjamincanac.png' }"
:label="upperFirst(variant)"
color="neutral"
:variant="variant"
/>
</div>
<div class="flex items-center gap-2 ml-[-129px]">
<UButton v-for="size in sizes" :key="size" label="Button" :size="size" />
</div>
<div class="flex items-center gap-2 ml-[-171px]">
<UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" label="Button" :size="size" />
</div>
<div class="flex items-center gap-2 ml-[-171px]">
<UButton v-for="size in sizes" :key="size" :avatar="{ src: 'https://github.com/benjamincanac.png' }" label="Button" :size="size" />
</div>
<div class="flex items-center gap-2 ml-[-159px]">
<UButton
v-for="size in sizes"
@@ -70,9 +88,29 @@ function onClick() {
:size="size"
/>
</div>
<div class="flex items-center gap-2 ml-[-159px]">
<UButton
v-for="size in sizes"
:key="size"
:avatar="{ src: 'https://github.com/benjamincanac.png' }"
label="Square"
square
:size="size"
/>
</div>
<div class="flex items-center gap-2 ml-[-68px]">
<UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" :size="size" />
</div>
<div class="flex items-center gap-2 ml-[-68px]">
<UButton
v-for="size in sizes"
:key="size"
:avatar="{ src: 'https://github.com/benjamincanac.png' }"
:size="size"
color="neutral"
variant="outline"
/>
</div>
<div class="flex items-center gap-2">
<UButton icon="i-heroicons-rocket-launch" trailing-icon="i-heroicons-chevron-down-20-solid" label="Block" block />
</div>