UIDrawer

UIDrawer

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

<template>
  <UIButton @click="showDrawer">Open Drawer</UIButton>

  <UIDrawer
    v-model:visible="visible"
    title="Drawer Title"
    placement="right"
    :width="520"
    @close="handleClose"
  >
    <template #header>
      <div class="flex items-center">
        <IconComponent class="mr-2" />
        Custom Header
      </div>
    </template>

    <div class="p-4">
      Drawer Content
    </div>

    <template #footer>
      <div class="flex justify-end space-x-2">
        <UIButton @click="handleCancel">Cancel</UIButton>
        <UIButton type="primary" @click="handleOk">OK</UIButton>
      </div>
    </template>
  </UIDrawer>
</template>

<script setup lang="ts">
const visible = ref(false)

const showDrawer = () => {
  visible.value = true
}

const handleClose = () => {
  visible.value = false
}

const handleCancel = () => {
  visible.value = false
}

const handleOk = () => {
  // Handle confirmation
  visible.value = false
}
</script>

Props

• visible (boolean): Control drawer visibility
• title (string): Drawer title
• placement (‘left’ | ‘right’ | ‘top’ | ‘bottom’): Drawer position
• width (number | string): Drawer width (for left/right)
• height (number | string): Drawer height (for top/bottom)
• mask (boolean): Show background mask
• maskClosable (boolean): Close on mask click
• closable (boolean): Show close button
• keyboard (boolean): Close on ESC key
• zIndex (number): Z-index value
• destroyOnClose (boolean): Destroy content on close
• getContainer (string | HTMLElement): Container element

Events

• update:visible: Emitted when visibility changes
• close: Emitted when drawer closes
• afterVisibleChange: Emitted after animation ends

Slots

• default: Drawer content
• header: Custom header content
• title: Custom title content
• footer: Custom footer content
• closeIcon: Custom close icon </rewritten_file>