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">
<div class="p-4 flex-1">
<Placeholder class="h-full" />
</div>
</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>
<Placeholder class="h-8" />
</template>
<Placeholder class="h-full" />
<template #footer>
<Placeholder class="h-8" />
</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
undefined
side
"left" | "right"
"right"
modelValue
boolean
false
transition
boolean
true
appear
boolean
false
overlay
boolean
true
preventClose
boolean
false
Config
{
"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"
}
}