Drawer

The Drawer component is a sliding panel that appears from the side, top, or bottom of the screen. It's perfect for navigation menus, settings panels, or any content that needs to be accessible without completely covering the main interface.

<VsButton @click="toggleDrawer">Open Left Drawer</VsButton>
<VsDrawer v-model:visible="isOpen" title="Menu" position="right" size="small">
  <div class="p-4">
    <p class="text-blue-500">Welcome to the drawer!</p>
    <p class="text-gray-600">This content slides in from the left side.</p>
  </div>
</VsDrawer>

Different Positions

Right Drawer

<VsDrawer v-model:visible="isOpenRight" title="Settings" position="right">
  <div class="p-4">
    <p>Settings panel slides from the right</p>
  </div>
</VsDrawer>

Top Drawer

<VsDrawer v-model:visible="isOpenTop" title="Notifications" position="top">
  <div class="p-4">
    <p>Notifications slide from the top</p>
  </div>
</VsDrawer>

Bottom Drawer

<VsDrawer v-model:visible="isOpenBottom" title="Actions" position="bottom">
  <div class="p-4">
    <p>Action panel slides from the bottom</p>
  </div>
</VsDrawer>

With Footer

<VsDrawer v-model:visible="isOpen" title="Drawer with Footer">
  <div class="p-4">
    <p>Main content goes here</p>
  </div>
  <template #footer="{ handleClose }">
    <VsButton @click="handleClose">Cancel</VsButton>
    <VsButton type="primary">Save</VsButton>
  </template>
</VsDrawer>

Interface

export interface DrawerProps {
  title?: string;
  visible: boolean;
  position?: 'left' | 'right' | 'top' | 'bottom';
  size?: string;
}

Props

Prop	Type	Default	Description
visible	boolean	false	Controls the visibility of the drawer
title	string	""	Title displayed in the drawer header
position	'left' | 'right' | 'top' | 'bottom'	'left'	Position from which the drawer slides in
size	string	500px	Size of the drawer
closeClickBack	boolean	false	Whether clicking the overlay closes the drawer

Events

Event	Description
update:visible	Emitted when the visibility state changes
close	Emitted when the drawer is closed

Slots

Slot	Description
default	Main content of the drawer
footer	Footer content with close handler