Overlays

Drawer

@xui/drawer

A panel that slides in from an edge. Same modal overlay as the dialog, pinned to a side and sized on its sliding axis, with a Web-Animations slide-in. Position, animation and focus are not testable in jsdom — verify here.

Install

pnpm add @xui/drawer

Add the barrel to a standalone component's imports:

import { XuiDrawerImports } from '@xui/drawer';

@Component({
  imports: [XuiDrawerImports],
  // …
})

Examples

Positions

Loading preview…

<div class="flex flex-wrap gap-2">
  @for (p of ['left', 'right', 'top', 'bottom']; track p) {
    <button xuiButton variant="outline" (click)="position.set(p); open.set(true)">From {{ p }}</button>
  }
</div>
<xui-drawer [(open)]="open" [position]="position()" title="Filters">
  <div class="flex flex-col gap-3 p-6 text-sm">
    <p class="text-foreground-muted">Sliding in from the {{ position() }} edge.</p>
    <xui-checkbox label="Only starred" />
    <xui-checkbox label="Archived" />
  </div>
</xui-drawer>

With footer

Loading preview…

<button xuiButton (click)="open.set(true)">Edit settings</button>
<xui-drawer [(open)]="open" position="right" size="lg" title="Settings">
  <div class="flex h-full flex-col">
    <div class="flex-1 space-y-4 overflow-auto p-6 text-sm">
      @for (n of [1,2,3,4,5,6]; track n) {
        <label xuiLabel class="grid gap-1.5">
          Field {{ n }}
          <input xuiInput class="w-full" />
        </label>
      }
    </div>
    <div class="border-border flex justify-end gap-2 border-t p-4">
      <button xuiButton variant="ghost" (click)="open.set(false)">Cancel</button>
      <button xuiButton (click)="open.set(false)">Save</button>
    </div>
  </div>
</xui-drawer>

API

XuiDrawer

component

xui-drawer

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

Inputs

Name

Type

Default

class

ClassValueThe user-defined classes on the surface. Merged last so they win.

''

title

string | nullThe drawer's heading, also used as its accessible name.

null

position

XuiDrawerPositionWhich edge the drawer slides in from. Also decides whether size is read as a width or a height.

this.config.position

size

XuiDrawerSizeHow far the drawer extends from its edge — a width for left/right, a height for top/bottom.

this.config.size

canEscapeKeyClose

booleanLet Escape close the drawer.

this.config.canEscapeKeyClose

canOutsideClickClose

booleanLet a click on the backdrop close the drawer.

this.config.canOutsideClickClose

showCloseButton

booleanShow the × in the header.

this.config.showCloseButton

open

two-way

booleanWhether the drawer is showing. Two-way bindable with [(open)].

false

Methods

show(): void

close(): void

Source

libs/ui/drawer/xui