Drawer

Overlay panel that slides in from the screen edge.

Basic Usage

Control visibility with v-model. Defaults to sliding in from the right.

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

<ABtn @click="show = true">Right Drawer</ABtn>
<ADrawer v-model="show" title="Drawer Title">
  This is the drawer content area.
</ADrawer>

Slide from Left

Set placement="left" to slide from the left.

<ADrawer v-model="show" placement="left" title="Left Drawer">
  Content
</ADrawer>

API

Props

Name	Type	Default	Description
modelValue	boolean	false	Visibility
placement	'left' | 'right' | 'top' | 'bottom'	'right'	Slide direction
width	string	'300px'	Left/right drawer width
height	string	'300px'	Top/bottom drawer height
title	string	—	Title
closable	boolean	true	Show close button
maskClosable	boolean	true	Close on mask click

Events

Name	Description
update:modelValue	Visibility changed
open	Drawer opened
close	Drawer closed

Slots

Name	Description
default	Body content
header	Custom header

Interaction

• Mask fade-in + panel ease-out slide
• Mask click closes
• Esc key closes
• Body scroll locked on open