arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-27 02:10:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Drawer): implement with vaul-vue

Browse Source 
Resolves #53
This commit is contained in:
Benjamin Canac
2024-04-11 14:50:38 +02:00
parent bc2d9ab620
commit 5e6275fcff
11 changed files with 444 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
playground/pages/drawer.vue Normal file
View File

@@ -0,0 +1,28 @@
<script setup lang="ts">
const open = ref(false)
</script>
<template>
<div class="flex flex-col gap-2">
<UDrawer v-model:open="open" title="Drawer with v-model" description="This is useful to control the state yourself.">
<UButton color="white" label="Open with v-model" />
<template #body>
<Placeholder class="h-48 w-full" />
</template>
<template #footer>
<UButton label="Submit" color="black" class="justify-center" />
<UButton label="Cancel" color="white" class="justify-center" @click="open = false" />
</template>
</UDrawer>
<UDrawer should-scale-background title="Drawer with `should-scale-background`" description="You need to add the `vaul-drawer-wrapper` directive to your content to make it work.">
<UButton color="white" label="Open with scale" />
<template #body>
<Placeholder class="h-screen w-full" />
</template>
</UDrawer>
</div>
</template>

2
playground/pages/slideover.vue
View File

@@ -42,7 +42,7 @@ const open = ref(false)
</template>
</USlideover>
<USlideover v-model:open="open" title="Slideover with v-model" description="This can be useful to control the state of the slideover yourself.">
<USlideover v-model:open="open" title="Slideover with v-model" description="This is useful to control the state yourself.">
<template #body>
<Placeholder class="h-full w-full" />
</template>