Indielayer UI - Vue.js 3 / Nuxt.js 3 UI Library with Tailwind CSS 4. ⚡️  Build and prototype fast web applications.

Indielayer
Indielayer UIIndielayer UI
UI
v2.1.0

Drawer

Panels that slide in from the screen edge for navigation, filters, or extra content. Use drawers when side context should overlay without leaving the page.

#
Usage

Basic example with common props.

#API

Drawer

props

Name
Description
Type
Default
Values
Required
modelValue
Open state (v-model).
Boolean
false
position
Edge the drawer attaches to (left, right, top, bottom).
String
left
leftrighttopbottom
teleportTo
Teleport target when the drawer is detached (overlay mode).
String
Object
body
width
Panel width in pixels when position is left or right.
String
Number
220
height
Panel height in pixels when position is top or bottom.
String
Number
320
breakpoint
Below this viewport size the drawer becomes an overlay. Tailwind key or pixel width.
String
Number
backdrop
Shows a dimmed backdrop behind the drawer when detached.
Boolean
true

slots

Name
Description
default
Main drawer body (scrollable).
header
Content above the scrollable body.
footer
Content below the scrollable body.

emits

Name
Description
update:modelValue
Emitted when open state changes (v-model).

methods

Name
Description
open
Open the drawer.
close
Close the drawer.
divider
empty