PxDrawer

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

Demo

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

const open = ref(false)
const position = ref('right')
</script>

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

  <PxDrawer v-model:visible="open" header="Details" :position="position">
    <p>Drawer content goes here.</p>
  </PxDrawer>
</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.
closable	boolean	true	Shows the × close button, and enables closing via the Escape key and clicking the backdrop.
style	Record<string, string>	undefined	Inline styles for the drawer panel.

No size prop

The drawer's width (left/right positions) is a fixed 550px and its height (top/bottom) is capped at 80vh, both set in CSS — there's no prop to override this today. The backdrop is also always shown; there's no way to render the drawer without one.

Emits

Event	Payload	Description
update:visible	boolean	Emitted with false when the drawer should close.

Slots

Slot	Description
default	Drawer body content.
header	Custom header rendering (replaces the header prop text).