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

feat(Slideover): new component

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-18 17:19:06 +01:00
parent a7cb28a50e
commit 38eb932b53
7 changed files with 672 additions and 1 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 = ['avatar', 'badge', 'button', 'card', 'chip', 'collapsible', 'kbd', 'modal', 'popover', 'skeleton', 'tabs', 'tooltip']
const components = ['avatar', 'badge', 'button', 'card', 'chip', 'collapsible', 'kbd', 'modal', 'popover', 'skeleton', 'slideover', 'tabs', 'tooltip']
</script>
<template>

93
playground/pages/slideover.vue Normal file
View File

@@ -0,0 +1,93 @@
<template>
<div class="flex flex-col gap-2">
<USlideover title="First slideover">
<UButton color="white" label="Open with nested" />
<template #body>
<Placeholder class="h-full w-full" />
</template>
<template #footer>
<USlideover title="Second slideover">
<UButton label="Open second" />
</USlideover>
</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>
<USlideover title="Slideover without overlay" description="This slideover has `overlay: false` prop." :overlay="false">
<UButton label="Open without overlay" color="white" />
<template #body>
<Placeholder class="h-full w-full" />
</template>
</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" />
<template #body>
<Placeholder class="h-full w-full" />
</template>
</USlideover>
<USlideover title="Slideover without transition" description="This slideover has `transition: false` prop." :transition="false">
<UButton label="Open without transition" color="white" />
<template #body>
<Placeholder class="h-full w-full" />
</template>
</USlideover>
<USlideover title="Slideover without portal" description="This slideover has `portal: false` prop." :portal="false">
<UButton label="Open without portal" color="gray" />
<template #body>
<Placeholder class="h-full w-full" />
</template>
</USlideover>
<USlideover title="Slideover prevent close" description="This slideover has `prevent-close: true` prop so it won't close when clicking outside." prevent-close>
<UButton label="Open unclosable" color="gray" />
<template #body>
<Placeholder class="h-full w-full" />
</template>
</USlideover>
<USlideover title="Slideover without close button" description="This slideover has `close: null` prop." :close="null">
<UButton label="Open without close button" color="white" />
<template #body>
<Placeholder class="h-full w-full" />
</template>
</USlideover>
<USlideover title="Slideover with custom close button" description="The `close` prop inherits from the Button props." :close="{ color: 'primary', variant: 'solid', size: 'xs' }" :ui="{ close: 'top-3.5 rounded-full' }">
<UButton label="Open with custom close button" color="gray" />
<template #body>
<Placeholder class="h-full w-full" />
</template>
</USlideover>
</div>
</template>
<script setup lang="ts">
const open = ref(false)
</script>