Drawer

A panel that slides out from the edge of the screen.

Basic Usage

The simplest usage, sliding out from the right side.

Custom Direction

Supports top, right, bottom, and left directions.

Custom Size

The width or height can be controlled via the size attribute.

Glassmorphism (Acrylic)

Enabled via the glass attribute for a flagship visual experience.

Resizable

Enable the resizable attribute to allow users to adjust the drawer size by dragging the edge.

Action with Footer

Add action buttons via show-footer and the footer slot.

Nested Drawers

The Drawer component supports multi-level nesting, automatically managing z-index to ensure inner drawers always overlay outer ones.

Local Container Reveal (Inner Mode)

Enabled via the inner attribute, the drawer will render using absolute positioning within the nearest relative parent container. Supports all four directions and automatically disables Teleport to ensure correct layering.

Custom Close Icon

You can fully customize the top-right close trigger area via the close-icon slot.

Disable Corners (Square Style)

Rounded corners (flagship aesthetic) are enabled by default, and can be quickly switched to a hardcore square style via the round attribute.

Mask Layer (Modal)

The background mask layer can be enabled or disabled via the modal attribute.

Use in Nuxt

API

Props

Prop	Description	Type	Default
modelValue / v-model	Whether to show the drawer	boolean	false
title	Title	string | (() => VNode) | Component	-
placement	Drawer position	'top' | 'right' | 'bottom' | 'left'	'right'
size	Drawer size (width or height)	string | number	'30%'
modal	Whether to show mask layer	boolean	true
closeOnClickModal	Whether to close on clicking mask	boolean	true
closeOnPressEscape	Whether to close on pressing ESC	boolean	true
showClose	Whether to show close button	boolean	true
closeIcon	Custom close icon name	string	'close'
showHeader	Whether to show header	boolean	true
showFooter	Whether to show footer	boolean	false
lockScroll	Whether to lock viewport scroll	boolean	true
glass	Whether to enable glassmorphism (Acrylic) mode	boolean	false
resizable	Whether size is adjustable	boolean	false
minSize	Minimum size (px)	number	150
maxSize	Maximum size (px)	number	1000
destroyOnClose	Whether to destroy content on close	boolean	false
zIndex	Manually set z-index level	number	-
teleportTo	Mount node	string | HTMLElement	'body'
beforeClose	Hook before close, execute done to close	(done: () => void) => void	-
round	Whether to show rounded corners (flagship aesthetic)	boolean	true
inner	Whether to pop up in a specified container (enables absolute positioning)	boolean	false
customClass	Additional class name for drawer container	string	-
modalClass	Additional class name for mask layer	string	-
titleStyle	Custom style for header title	CSSProperties | string	-
contentStyle	Custom style for body content	CSSProperties | string	-
footerStyle	Custom style for footer	CSSProperties | string	-
drawerStyle	Custom style for drawer panel overall	CSSProperties | string	-

Events

Event Name	Description	Callback Parameters
open	Triggered when panel opens	-
opened	Triggered when opening animation finishes	-
close	Triggered when panel closes	-
closed	Triggered when closing animation finishes	-
resize	Triggered when size is adjusted	(size: number)
update:modelValue	v-model update event	(value: boolean)

Slots

Slot Name	Description
default	Core content area of the drawer
header	Customizes the entire header area (overrides title and close button)
title	Customizes only the title text portion
footer	Customizes the footer content area
close-icon	Customizes the icon inside the close button

Expose

Prop Name	Description	Type
drawerRef	DOM element reference of drawer container	HTMLElement | null
handleClose	Manually triggers the close process (supports beforeClose hook)	(isClickModal?: boolean) => void

Theme Variables

The component is deeply integrated with the YH-UI design system, and all color variables are interfaced with the global theme system, automatically supporting dark mode:

Variable	Description	Default
--yh-drawer-bg-color	Drawer panel background color	var(--yh-bg-color-overlay)
--yh-drawer-shadow	Drawer shadow intensity	var(--yh-shadow-lg)
--yh-drawer-title-color	Title text color	var(--yh-text-color-primary)
--yh-drawer-border-color	Split line/border color	var(--yh-border-color-lighter)
--yh-drawer-header-height	Header height	56px
--yh-drawer-footer-height	Footer height	60px
--yh-drawer-padding	Content area padding	20px
--yh-drawer-radius	Corner radius size	var(--yh-radius-xl)
--yh-drawer-transition	Animation duration	var(--yh-transition-duration)