Slideover

Usage

<script setup>
const isOpen = ref(false)
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <USlideover v-model="isOpen">
      <!-- Content -->
    </USlideover>
  </div>
</template>

Props

Prop	Default	Description
`side`	`"right"`	`string`
`modelValue`	`false`	`boolean`
`appear`	`false`	`boolean`
`overlay`	`true`	`boolean`
`transition`	`true`	`boolean`
`ui`	`appConfig.ui.slideover`	`any`

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"
  }
}