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

feat(Slideover): add top / bottom sides

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-18 21:36:05 +01:00
parent da9ea7ac17
commit 3e8a99244e
5 changed files with 142 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
playground/pages/slideover.vue
View File

@@ -14,24 +14,40 @@
</template>
</USlideover>
<USlideover title="Slideover on left side" description="This slideover has `side: 'left'` prop." side="left">
<UButton label="Open on left" color="gray" />
<template #body>
<Placeholder class="h-full w-full" />
</template>
</USlideover>
<USlideover title="Slideover on top side" description="This slideover has `side: 'top'` prop." side="top">
<UButton label="Open on top" color="white" />
<template #body>
<Placeholder class="h-48 w-full" />
</template>
</USlideover>
<USlideover title="Slideover on bottom side" description="This slideover has `side: 'bottom'` prop." side="bottom">
<UButton label="Open on bottom" color="gray" />
<template #body>
<Placeholder class="h-48 w-full" />
</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.">
<template #body>
<Placeholder class="h-full w-full" />
</template>
</USlideover>
<UButton label="Open with v-model" color="gray" @click="open = true" />
<USlideover title="Slideover on left side" description="This slideover has `side: 'left'` prop." side="left">
<UButton label="Open on left" color="white" />
<template #body>
<Placeholder class="h-full w-full" />
</template>
</USlideover>
<UButton label="Open with v-model" color="white" @click="open = true" />
<USlideover title="Slideover without overlay" description="This slideover has `overlay: false` prop." :overlay="false">
<UButton label="Open without overlay" color="white" />
<UButton label="Open without overlay" color="gray" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -39,7 +55,7 @@
</USlideover>
<USlideover title="Slideover without modal & overlay" description="This slideover has `modal: false` and `overlay: false` to interact with outside content." :overlay="false" :modal="false">
<UButton label="Open without modal" color="gray" />
<UButton label="Open without modal" color="white" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -47,7 +63,7 @@
</USlideover>
<USlideover title="Slideover without transition" description="This slideover has `transition: false` prop." :transition="false">
<UButton label="Open without transition" color="white" />
<UButton label="Open without transition" color="gray" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -55,7 +71,7 @@
</USlideover>
<USlideover title="Slideover without portal" description="This slideover has `portal: false` prop." :portal="false">
<UButton label="Open without portal" color="gray" />
<UButton label="Open without portal" color="white" />
<template #body>
<Placeholder class="h-full w-full" />