Overview
The Slideover component is a panel that slides in from the edge of the screen, useful for navigation menus, forms, or additional content without navigating away from the current page.
Basic usage
<template>
<div>
<UButton @click="isOpen = true">Open Slideover</UButton>
<USlideover v-model="isOpen">
<div class="p-6">
<h2>Slideover Content</h2>
<p>This is the slideover panel content.</p>
</div>
</USlideover>
</div>
</template>
<script setup lang="ts">
const isOpen = ref(false)
</script>
From different sides
<template>
<USlideover v-model="isOpen" side="left">
<div class="p-6">Content from left</div>
</USlideover>
</template>
Props
Control the slideover open state.
side
'left' | 'right' | 'top' | 'bottom'
default:"'right'"
Which side the slideover appears from.
Allow closing by clicking outside or pressing escape.
Events
Emitted when the slideover is opened or closed.