Drawer

Usage

Basic

With a confirmation dialog open on top, Tab stays inside it and Escape closes only the dialog.

Direction

direction takes four edges; size is the width for left and right, and the height for top and bottom.

Size and Fullscreen

size takes a number (px), a CSS length, a percentage, or 'full'; full equals size="full".

Header, Footer, and Mask

The header and footer slots receive close; maskEffect sets the mask look, and panelTransparent lets the page show through the panel.

Form

When close isn't needed, the footer slot can update outside state directly.

<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>
  <!-- Clicking the mask doesn't close it -->
  <TxDrawer v-model:visible="visible" title="Persistent" :close-on-click-mask="false">
    <p>Only the close button closes this drawer</p>
  </TxDrawer>

  <!-- Escape doesn't close it -->
  <TxDrawer v-model:visible="visible2" title="No Escape" :close-on-press-escape="false">
    <p>Escape does not close this drawer</p>
  </TxDrawer>
</template>

Open and Close Events

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

Dashboard Navigation

Tabs hold the top-level sections, DropdownMenu the light actions, Popover the short notes, and Drawer the dense settings.

Best Practices

• Put long forms, audit details, permission matrices, and flows that need a footer action bar in a drawer, not a popover.
• Give a meaningful title even with showHeader=false; it is the dialog's accessible name.
• Size the drawer with size or full; width exists only for older call sites.
• Set mobileAdapt=false only when a side entrance matters more on small screens than a bottom sheet.
• Let the drawer manage focus instead of moving it from outside; form fields in the body still need explicit labels.

API Reference

Props

Events

Slots

Overview

• The root is role="dialog" with aria-modal="true"; with a header it uses aria-labelledby, otherwise title becomes the aria-label.
• Opening focuses the drawer and Tab cycles inside it; closing or unmounting returns focus to the previously focused element.
• The close button, the mask, and Escape all emit update:visible(false) and close; closeOnClickMask and closeOnPressEscape turn off the last two.
• Only the topmost modal dialog handles Tab and Escape, and keys another control already handled are ignored, so a confirmation on top owns them.
• When closed, the root stays in the DOM with inert and aria-hidden.

Technologies

• The header and footer dividers are TxDivider; don't hard-code borders for them.
• Source: packages/tuffex/packages/components/src/drawer/.