PraxisDrawer

A slide-in side panel (drawer/sidebar) that appears from the edge of the screen. Supports left, right, top, and bottom positions. Useful for detail panels and filter sidebars.

Usage

<script setup>
import { ref } from 'vue'
import { PraxisDrawer } from 'praxis-vue-ui'

const open = ref(false)
</script>

<template>
  <button @click="open = true">Open Drawer</button>

  <PraxisDrawer v-model:visible="open" header="Details" position="right">
    <p>Drawer content goes here.</p>
  </PraxisDrawer>
</template>

Props

Prop	Type	Default	Description
visiblerequired	boolean	—	Controls drawer open/close state. Use with v-model:visible.
header	string	undefined	Drawer header title.
position	'left' | 'right' | 'top' | 'bottom'	'right'	Which edge the drawer slides in from.
size	string	'30rem'	Width (for left/right) or height (for top/bottom) of the drawer.
dismissable	boolean	true	Closes the drawer when clicking outside.
modal	boolean	true	Shows an overlay backdrop.

Emits

Event	Payload	Description
update:visible	boolean	Emitted when the drawer is closed.

Slots

Slot	Description
default	Drawer body content.
header	Custom header rendering.
footer	Footer area, typically action buttons.