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 16:35:59 +01:00
parent 7b3d6636f4
commit c10737c0c6
5 changed files with 49 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
playground/app.vue
View File

@@ -5,7 +5,7 @@ useHead({
}
})
const components = ['button', 'collapsible', 'tooltip']
const components = ['badge', 'button', 'collapsible', 'tooltip']
</script>
<template>

27
playground/pages/badge.vue Normal file
View File

@@ -0,0 +1,27 @@
<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>
<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>
<div class="flex gap-1">
<UBadge icon="i-heroicons-rocket-launch" label="Badge" color="white" />
</div>
<div class="flex gap-1">
<UBadge icon="i-heroicons-rocket-launch" label="Badge" color="gray" />
</div>
<div class="flex gap-1">
<UBadge icon="i-heroicons-rocket-launch" label="Badge" color="black" />
</div>
</div>
</template>

34
playground/pages/button.vue
View File

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

6
playground/pages/collapsible.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="flex gap-1.5">
<UCollapsible>
<UButton label="Open" />
<UCollapsible class="space-y-2 flex flex-col justify-start">
<UButton trailing-icon="i-heroicons-chevron-right" label="Open" class="group" :ui="{ icon: 'group-data-[state=open]:rotate-180' }" />
<template #content>
<div class="bg-red-500 h-12" />
<div class="bg-red-500 h-12 w-48" />
</template>
</UCollapsible>
</div>

2
playground/pages/tooltip.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex gap-1.5">
<UTooltip content="Tooltip" side="bottom">
<UButton icon="i-heroicons-rocket-launch" to="/" label="Button" />
<UButton icon="i-heroicons-rocket-launch" label="Button" loading />
</UTooltip>
</div>
</template>