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 thins the colour under the panel's material so more of the page shows through.

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.
• On non-English surfaces, pass closeLabel: the close button is icon-only, so this name is all a screen reader announces.
• 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.
• The panel background is a card-preset TxBaseSurface (fake) under the header, body and footer, refraction by default. A sliding panel's filter samples where the panel was a frame earlier, so the material takes its motion fallback during the slide and recovers once it ends.
• Under high contrast the mask only dims the page without frosting it, and the panel's material turns solid on its own.

Technologies

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