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

playground: update

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-09 17:16:38 +01:00
parent e3874e0dd0
commit 39b879c972
2 changed files with 51 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
playground/pages/badge.vue
View File

@@ -1,27 +1,28 @@
<template> <template>
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-2">
<div class="flex gap-1.5"> <div class="flex items-center gap-2">
<UBadge icon="i-heroicons-rocket-launch" label="Badge" /> <UBadge>Badge</UBadge>
<UBadge icon="i-heroicons-rocket-launch" label="Badge" variant="outline" />
<UBadge icon="i-heroicons-rocket-launch" label="Badge" variant="soft" />
<UBadge icon="i-heroicons-rocket-launch" label="Badge" variant="subtle" />
</div> </div>
<div class="flex items-center gap-2">
<div class="flex gap-1.5"> <UBadge label="Badge" />
<UBadge icon="i-heroicons-rocket-launch" label="Badge" color="green" /> <UBadge label="Badge" variant="outline" />
<UBadge icon="i-heroicons-rocket-launch" label="Badge" color="green" variant="outline" /> <UBadge label="Badge" variant="soft" />
<UBadge icon="i-heroicons-rocket-launch" label="Badge" color="green" variant="soft" /> <UBadge label="Badge" variant="subtle" />
<UBadge icon="i-heroicons-rocket-launch" label="Badge" color="green" variant="subtle" />
</div> </div>
<div class="flex items-center gap-2">
<div class="flex gap-1"> <UBadge label="Badge" color="white" />
<UBadge icon="i-heroicons-rocket-launch" label="Badge" color="white" />
</div> </div>
<div class="flex gap-1"> <div class="flex items-center gap-2">
<UBadge icon="i-heroicons-rocket-launch" label="Badge" color="gray" /> <UBadge label="Badge" color="gray" />
</div> </div>
<div class="flex gap-1"> <div class="flex items-center gap-2">
<UBadge icon="i-heroicons-rocket-launch" label="Badge" color="black" /> <UBadge label="Badge" color="black" />
</div>
<div class="flex items-center gap-2 -ml-[56px]">
<UBadge label="Badge" size="xs" />
<UBadge label="Badge" size="sm" />
<UBadge label="Badge" size="md" />
<UBadge label="Badge" size="lg" />
</div> </div>
</div> </div>
</template> </template>

45
playground/pages/button.vue
View File

@@ -1,33 +1,50 @@
<template> <template>
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-2">
<div class="flex gap-1.5"> <div class="flex items-center gap-2">
<UButton>Button</UButton>
<UButton disabled>
Disabled
</UButton>
<UButton loading>
Loading
</UButton>
<UButton square>
Square
</UButton>
<UButton icon="i-heroicons-rocket-launch">
Icon
</UButton>
<UButton icon="i-heroicons-rocket-launch" trailing-icon="i-heroicons-chevron-down-20-solid" block>
Block
</UButton>
</div>
<div class="flex items-center gap-2">
<UButton icon="i-heroicons-rocket-launch" label="Button" /> <UButton icon="i-heroicons-rocket-launch" label="Button" />
<UButton icon="i-heroicons-rocket-launch" label="Button" variant="outline" /> <UButton icon="i-heroicons-rocket-launch" label="Button" variant="outline" />
<UButton icon="i-heroicons-rocket-launch" label="Button" variant="soft" /> <UButton icon="i-heroicons-rocket-launch" label="Button" variant="soft" />
<UButton icon="i-heroicons-rocket-launch" label="Button" variant="ghost" /> <UButton icon="i-heroicons-rocket-launch" label="Button" variant="ghost" />
<UButton icon="i-heroicons-rocket-launch" label="Button" variant="link" /> <UButton icon="i-heroicons-rocket-launch" label="Button" variant="link" />
</div> </div>
<div class="flex items-center gap-2">
<div class="flex gap-1.5">
<UButton icon="i-heroicons-rocket-launch" label="Button" color="green" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="green" variant="outline" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="green" variant="soft" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="green" variant="ghost" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="green" variant="link" />
</div>
<div class="flex gap-1">
<UButton icon="i-heroicons-rocket-launch" label="Button" color="white" /> <UButton icon="i-heroicons-rocket-launch" label="Button" color="white" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="white" variant="ghost" /> <UButton icon="i-heroicons-rocket-launch" label="Button" color="white" variant="ghost" />
</div> </div>
<div class="flex gap-1"> <div class="flex items-center gap-2">
<UButton icon="i-heroicons-rocket-launch" label="Button" color="gray" /> <UButton icon="i-heroicons-rocket-launch" label="Button" color="gray" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="gray" variant="ghost" /> <UButton icon="i-heroicons-rocket-launch" label="Button" color="gray" variant="ghost" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="gray" variant="link" /> <UButton icon="i-heroicons-rocket-launch" label="Button" color="gray" variant="link" />
</div> </div>
<div class="flex gap-1"> <div class="flex items-center gap-2">
<UButton icon="i-heroicons-rocket-launch" label="Button" color="black" /> <UButton icon="i-heroicons-rocket-launch" label="Button" color="black" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="black" variant="link" /> <UButton icon="i-heroicons-rocket-launch" label="Button" color="black" variant="link" />
</div> </div>
<div class="flex items-center gap-2 -ml-[174px]">
<UButton icon="i-heroicons-rocket-launch" label="Button" size="2xs" />
<UButton icon="i-heroicons-rocket-launch" label="Button" size="xs" />
<UButton icon="i-heroicons-rocket-launch" label="Button" size="sm" />
<UButton icon="i-heroicons-rocket-launch" label="Button" size="md" />
<UButton icon="i-heroicons-rocket-launch" label="Button" size="lg" />
<UButton icon="i-heroicons-rocket-launch" label="Button" size="xl" />
</div>
</div> </div>
</template> </template>