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

playground: update button

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-09 19:59:33 +01:00
parent 31da519650
commit f9cc5e4f8e
1 changed files with 41 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
playground/pages/button.vue
View File

@@ -1,21 +1,28 @@
<template> <template>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<UButton>Button</UButton> <UButton class="font-bold">
Button
</UButton>
</div>
<div class="flex items-center gap-2">
<UButton disabled> <UButton disabled>
Disabled Disabled
</UButton> </UButton>
</div>
<div class="flex items-center gap-2">
<UButton loading> <UButton loading>
Loading Loading
</UButton> </UButton>
<UButton square> </div>
Square <div class="flex items-center gap-2">
<UButton loading trailing>
Loading
</UButton> </UButton>
<UButton icon="i-heroicons-rocket-launch"> </div>
Icon <div class="flex items-center gap-2">
</UButton> <UButton truncate class="w-16">
<UButton icon="i-heroicons-rocket-launch" trailing-icon="i-heroicons-chevron-down-20-solid" block> Truncate
Block
</UButton> </UButton>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@@ -46,5 +53,31 @@
<UButton icon="i-heroicons-rocket-launch" label="Button" size="lg" /> <UButton icon="i-heroicons-rocket-launch" label="Button" size="lg" />
<UButton icon="i-heroicons-rocket-launch" label="Button" size="xl" /> <UButton icon="i-heroicons-rocket-launch" label="Button" size="xl" />
</div> </div>
<div class="flex items-center gap-2 -ml-[162px]">
<UButton icon="i-heroicons-rocket-launch" label="Square" square size="2xs" />
<UButton icon="i-heroicons-rocket-launch" label="Square" square size="xs" />
<UButton icon="i-heroicons-rocket-launch" label="Square" square size="sm" />
<UButton icon="i-heroicons-rocket-launch" label="Square" square size="md" />
<UButton icon="i-heroicons-rocket-launch" label="Square" square size="lg" />
<UButton icon="i-heroicons-rocket-launch" label="Square" square size="xl" />
</div>
<div class="flex items-center gap-2 -ml-[68px]">
<UButton icon="i-heroicons-rocket-launch" size="2xs" />
<UButton icon="i-heroicons-rocket-launch" size="xs" />
<UButton icon="i-heroicons-rocket-launch" size="sm" />
<UButton icon="i-heroicons-rocket-launch" size="md" />
<UButton icon="i-heroicons-rocket-launch" size="lg" />
<UButton icon="i-heroicons-rocket-launch" size="xl" />
</div>
<div class="flex items-center gap-2">
<UButton icon="i-heroicons-rocket-launch" trailing-icon="i-heroicons-chevron-down-20-solid" label="Block" loading block />
</div>
<div class="flex items-center gap-2">
<UButton icon="i-heroicons-rocket-launch" label="Button" class="group">
<template #leading="leadingProps">
<UIcon v-if="leadingProps.icon" :name="leadingProps.icon" :class="[leadingProps.class, 'group-hover:text-white']" aria-hidden="true" />
</template>
</UButton>
</div>
</div> </div>
</template> </template>