arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +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>
<div class="flex flex-col gap-3">
<div class="flex gap-1.5">
<UBadge icon="i-heroicons-rocket-launch" label="Badge" />
<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 class="flex flex-col gap-2">
<div class="flex items-center gap-2">
<UBadge>Badge</UBadge>
</div>
<div class="flex gap-1.5">
<UBadge icon="i-heroicons-rocket-launch" label="Badge" color="green" />
<UBadge icon="i-heroicons-rocket-launch" label="Badge" color="green" variant="outline" />
<UBadge icon="i-heroicons-rocket-launch" label="Badge" color="green" variant="soft" />
<UBadge icon="i-heroicons-rocket-launch" label="Badge" color="green" variant="subtle" />
<div class="flex items-center gap-2">
<UBadge label="Badge" />
<UBadge label="Badge" variant="outline" />
<UBadge label="Badge" variant="soft" />
<UBadge label="Badge" variant="subtle" />
</div>
<div class="flex gap-1">
<UBadge icon="i-heroicons-rocket-launch" label="Badge" color="white" />
<div class="flex items-center gap-2">
<UBadge label="Badge" color="white" />
</div>
<div class="flex gap-1">
<UBadge icon="i-heroicons-rocket-launch" label="Badge" color="gray" />
<div class="flex items-center gap-2">
<UBadge label="Badge" color="gray" />
</div>
<div class="flex gap-1">
<UBadge icon="i-heroicons-rocket-launch" label="Badge" color="black" />
<div class="flex items-center gap-2">
<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>
</template>

45
playground/pages/button.vue
View File

@@ -1,33 +1,50 @@
<template>
<div class="flex flex-col gap-3">
<div class="flex gap-1.5">
<div class="flex flex-col gap-2">
<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" variant="outline" />
<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="link" />
</div>
<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">
<div class="flex items-center gap-2">
<UButton icon="i-heroicons-rocket-launch" label="Button" color="white" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="white" variant="ghost" />
</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" variant="ghost" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="gray" variant="link" />
</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" variant="link" />
</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>
</template>