Usage
Use a v-model to control the Slideover state.
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<USlideover v-model="isOpen">
<!-- Content -->
</USlideover>
</div>
</template>You can put a Card component inside your Slideover to handle forms and take advantage of header and footer slots:
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<USlideover v-model="isOpen">
<UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<!-- Content -->
</template>
<!-- Content -->
<template #footer>
<!-- Content -->
</template>
</UCard>
</USlideover>
</div>
</template>Disable overlay
Set the overlay prop to false to disable it.
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<USlideover v-model="isOpen" :overlay="false">
<div class="p-4 flex-1">
<Placeholder class="h-full" />
</div>
</USlideover>
</div>
</template>Disable transition
Set the transition prop to false to disable it.
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<USlideover v-model="isOpen" :transition="false">
<div class="p-4 flex-1">
<Placeholder class="h-full" />
</div>
</USlideover>
</div>
</template>Prevent close
Use the prevent-close prop to disable the outside click alongside the esc keyboard shortcut.
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<USlideover v-model="isOpen" prevent-close>
<UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Slideover
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
</div>
</template>
<Placeholder class="h-full" />
</UCard>
</USlideover>
</div>
</template>You can still handle the esc shortcut yourself by using our defineShortcuts composable.
<script setup>
const isOpen = ref(false)
defineShortcuts({
escape: {
usingInput: true,
whenever: [isOpen],
handler: () => { isOpen.value = false }
}
})
</script>Props
ui
any
{}
side
"left" | "right"
"right"
modelValue
boolean
false
appear
boolean
false
overlay
boolean
true
transition
boolean
true
preventClose
boolean
false
Preset
appConfig.ui.slideover
{
"wrapper": "fixed inset-0 flex z-50",
"overlay": {
"base": "fixed inset-0 transition-opacity",
"background": "bg-gray-200/75 dark:bg-gray-800/75",
"transition": {
"enter": "ease-in-out duration-500",
"enterFrom": "opacity-0",
"enterTo": "opacity-100",
"leave": "ease-in-out duration-500",
"leaveFrom": "opacity-100",
"leaveTo": "opacity-0"
}
},
"base": "relative flex-1 flex flex-col w-full focus:outline-none",
"background": "bg-white dark:bg-gray-900",
"ring": "",
"rounded": "",
"padding": "",
"shadow": "shadow-xl",
"width": "w-screen max-w-md",
"transition": {
"enter": "transform transition ease-in-out duration-300",
"leave": "transform transition ease-in-out duration-200"
}
}