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 loads on client.

Direction

Drawers can slide in from the left or right.

Direction

Left and right drawers.

Demo loads on client.

Custom Width

Fixed width drawer example.

Demo loads on client.

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