Drawer

Panels that slide in from the screen edge, ideal for settings, forms, and auxiliary content.

Basic Usage

Basic Drawer

The common drawer pattern.

Demo will load when visible.

<template>
  <TxButton @click="visible1 = true">Open Drawer</TxButton>
  <TxDrawer v-model:visible="visible1" title="Settings">
    <p>This is the drawer content area.</p>
    <p>Supports custom width, direction, and close behavior.</p>
  </TxDrawer>
</template>

Direction

Drawers can slide in from the left or right.

Direction

Left and right drawers.

Demo will load when visible.

<template>
  <TxButton @click="visible2 = true">Left Drawer</TxButton>
  <TxButton @click="visible3 = true">Right Drawer</TxButton>
  <TxDrawer v-model:visible="visible2" title="Left Drawer" direction="left">
    <p>Slides in from the left</p>
  </TxDrawer>
  <TxDrawer v-model:visible="visible3" title="Right Drawer" direction="right">
    <p>Slides in from the right (default)</p>
  </TxDrawer>
</template>

Custom Width

Fixed width drawer example.

Demo will load when visible.

<template>
  <TxButton @click="visible4 = true">Custom width (400px)</TxButton>
  <TxDrawer v-model:visible="visible4" title="Fixed Width" width="400px">
    <p>This drawer stays at 400px wide.</p>
  </TxDrawer>
</template>

Use the footer slot to add action buttons.

<template>
  <TxDrawer v-model:visible="visible" title="Form">
    <form>
      <input type="text" placeholder="Name" />
    </form>

    <template #footer>
      <TxButton @click="visible = false">Cancel</TxButton>
      <TxButton type="primary" @click="handleSave">Save</TxButton>
    </template>
  </TxDrawer>
</template>

Close Behavior

<template>
  <!-- Disable mask click -->
  <TxDrawer
    v-model:visible="visible"
    title="Persistent"
    :close-on-click-mask="false"
  >
    <p>Close via the button only.</p>
  </TxDrawer>

  <!-- Disable Escape close -->
  <TxDrawer
    v-model:visible="visible2"
    title="Disable Escape"
    :close-on-press-escape="false"
  >
    <p>Escape key won't close this drawer.</p>
  </TxDrawer>
</template>

Events

<template>
  <TxDrawer
    v-model:visible="visible"
    title="Event Demo"
    @open="handleOpen"
    @close="handleClose"
  >
    <p>Content</p>
  </TxDrawer>
</template>

API

Props

Property	Type	Description
visible		Controls drawer visibility
title		Title text
width		Drawer width
direction	leftright	Slide-in direction
showClose		Show close button
closeOnClickMask		Close on mask click
closeOnPressEscape		Close on Escape key
zIndex		Custom z-index

Events

Property	Default	Description
update:visible	-	Emitted on visibility change
open	-	Emitted when opened
close	-	Emitted when closed

Slots

Property	Type	Default	Description
default	-	-	Main content
footer	-	-	Footer area

Interaction Contract

The drawer root exposes role="dialog" and aria-modal="true", with an instance-scoped aria-labelledby link to the title.
Opening the drawer focuses the drawer root; hiding or unmounting restores focus to the element that was active before opening.
The close button, mask click, and Escape close paths emit update:visible(false) and close by default; closeOnClickMask=false and closeOnPressEscape=false block their respective paths.
showClose=false removes the close button without changing mask or Escape behavior.