Drawer
A side-anchored overlay panel that slides in from any of the four edges. Use it for detail views, filter panels, or contextual forms that don't deserve a full route. Bind open (or use the model-value alias) to control visibility, listen to mno-toggle for state changes, and pick the slide direction with position. Toggle Vue / CSS to switch the live demo and source together.
Basic
Default right-side drawer with a header, body, and close button.
Vue SFC
Positions
Slide in from left, right, top, or bottom.
Vue SFC
Stacked
Set stackable to let drawers stack — open a drawer from inside another, any depth. Each new drawer sits above the previous, only one backdrop dims the screen, and Esc / overlay-click affect only the topmost. Without stackable a drawer is exclusive: opening one closes any other open drawer.
Vue SFC
Sizes
Five sizes from sm to full width / height.
Vue SFC
Resizable
Set resizeable to let users resize the drawer by dragging the handle on the panel's inner edge — width for left/right drawers, height for top/bottom. The size is clamped between a minimum and the viewport.
Vue SFC
Colors
Six accent colors threaded through the head and scrollbar.
Vue SFC
Header & footer slots
Custom header and footer content via slots.
Vue SFC
Persistent
Overlay click and Escape are ignored — only the close button or programmatic hide() will dismiss.
Vue SFC
No overlay
Side panel without a backdrop — page behind stays interactive.
Vue SFC
Event log
Live log of mno-toggle events with source (overlay / close / escape / manual).
Vue SFC
Customized
Per-element overrides via cssClass (Vue) or utility classes (CSS).
Vue SFC
Types
Import
import { DrawerProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
modelValue | boolean | false | Two-way bound open state of the drawer. |
position | 'left' | 'right' | 'top' | 'bottom' | 'right' | Edge the drawer slides in from. |
size | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'md' | Sizing scale of the drawer panel. |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'primary' | Color theme applied to the drawer. |
title | string | '' | Heading text shown in the drawer header. |
dismissible | boolean | true | Shows a close button and allows dismissal. |
persistent | boolean | false | Prevents closing via overlay click or escape. |
overlay | boolean | true | Renders a backdrop overlay behind the panel. |
closeOnEscape | boolean | true | Closes the drawer when the Escape key is pressed. |
closeOnOverlay | boolean | true | Closes the drawer when the overlay is clicked. |
lockScroll | boolean | true | Locks body scroll while the drawer is open. |
resizeable | boolean | false | Allow resizing the drawer by dragging a handle on the panel's inner edge. |
stackable | boolean | false | Allow this drawer to stack on top of others. When false (default) it is exclusive — opening it closes any other open drawers. |
cssClass | DrawerCssClass | {} | Per-element class overrides for internal parts. |
cssClassName | string | '' | Extra class name applied to the drawer root. |