Drawer

A panel that slides in from the edge of the screen for a detail view or a form.

<template>
  <Drawer v-model:open="open" title="SQL injection in login handler" size="lg">
    Content
  </Drawer>
</template>

Props

Name	Type	Default
size	"sm" \| "md" \| "lg" \| "xl"	"md"
title	string	—
closeLabel	string	"Close"
...props	USlideover props (side, overlay, dismissible, ...)	—

Name	Description
default	The scrollable body content, below the tray header.
meta	A secondary metadata row under the title (links, tags, badges) — only renders its wrapper row if provided.
actions	A right-aligned action cluster in the tray header (dropdowns, buttons) — only renders its wrapper row if provided.
nav-leading	Extra controls in the top nav bar's left cluster, after the always-present close button — e.g. a maximize button.
nav-trailing	Content in the top nav bar's right cluster — e.g. prev/next navigation. Only renders its wrapper row if provided.
footer	Forwarded to USlideover's own #footer slot, unstyled.
content	Full escape hatch, forwarded to USlideover's own #content slot with `close` on its scoped slot — bypasses this component's entire shell (top nav bar, tray header, body) for a drawer that doesn't fit it at all.