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-11 15:08:48 +01:00
parent 4f344437e2
commit aaedabda3b
4 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
playground/app.vue
View File

@@ -5,19 +5,21 @@ useHead({
}
})
const components = ['badge', 'button', 'collapsible', 'tooltip']
const components = ['avatar', 'badge', 'button', 'collapsible', 'tooltip']
</script>
<template>
<UProvider>
<UContainer class="min-h-screen flex flex-col gap-4 items-center justify-center">
<div class="flex gap-1.5">
<UContainer class="min-h-screen flex flex-col gap-4 items-center justify-center overflow-y-auto">
<div class="flex gap-1.5 py-4">
<ULink v-for="component in components" :key="component" :to="`/${component}`" active-class="text-primary capitalize text-sm">
{{ component }}
</ULink>
</div>
<NuxtPage />
<div class="flex-1 flex flex-col justify-center">
<NuxtPage />
</div>
</UContainer>
</UProvider>
</template>

6
playground/pages/button.vue
View File

@@ -45,7 +45,7 @@
<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]">
<div class="flex items-center gap-2 -ml-[171px]">
<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" />
@@ -53,7 +53,7 @@
<UButton icon="i-heroicons-rocket-launch" label="Button" size="lg" />
<UButton icon="i-heroicons-rocket-launch" label="Button" size="xl" />
</div>
<div class="flex items-center gap-2 -ml-[162px]">
<div class="flex items-center gap-2 -ml-[159px]">
<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" />
@@ -61,7 +61,7 @@
<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]">
<div class="flex items-center gap-2 -ml-[67px]">
<UButton icon="i-heroicons-rocket-launch" size="2xs" />
<UButton icon="i-heroicons-rocket-launch" size="xs" />
<UButton icon="i-heroicons-rocket-launch" size="sm" />

13
playground/pages/collapsible.vue
View File

@@ -1,10 +1,17 @@
<template>
<div class="flex gap-1.5">
<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' }" />
<UCollapsible class="space-y-2 w-48">
<UButton
class="group"
color="gray"
label="Open"
block
trailing-icon="i-heroicons-chevron-right-20-solid"
:ui="{ trailingIcon: 'group-data-[state=open]:rotate-90 transition' }"
/>
<template #content>
<div class="bg-red-500 h-12 w-48" />
<div class="bg-red-500 h-12 w-full" />
</template>
</UCollapsible>
</div>

4
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" label="Button" loading />
<UTooltip content="Tooltip">
<UButton icon="i-heroicons-rocket-launch" label="Button" disabled />
</UTooltip>
</div>
</template>