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
undefined
side
"left" | "right"
"right"
transition
boolean
true
modelValue
boolean
false
appear
boolean
false
overlay
boolean
true
preventClose
boolean
false
Preset
{ "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" }}