ui/docs/content/6.overlays/2.slideover.md

description, links

description	links
Display a dialog that slides in from the edge of the screen.	label icon to GitHub i-simple-icons-github https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Slideover.vue label icon to Dialog i-simple-icons-headlessui https://headlessui.com/vue/dialog

Usage

Use a v-model to control the Slideover state.

:component-example{component="slideover-example-basic"}

You can put a Card component inside your Slideover to handle forms and take advantage of header and footer slots:

:component-example{component="slideover-example-card"}

Disable overlay

Set the overlay prop to false to disable it.

:component-example{component="slideover-example-disable-overlay"}

Disable transition

Set the transition prop to false to disable it.

:component-example{component="slideover-example-disable-transition"}

Prevent close

Use the prevent-close prop to disable the outside click alongside the esc keyboard shortcut.

:component-example{component="slideover-example-prevent-close"}

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

:component-props

Preset

:component-preset