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
appConfig.ui.slideover
undefined