Drawer
@xui/drawerA 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
API
A panel that slides in from an edge of the screen.
Inputs
classClassValueThe user-defined classes on the surface. Merged last so they win.''titlestring | nullThe drawer's heading, also used as its accessible name.nullpositionXuiDrawerPositionWhich edge the drawer slides in from. Also decides whether size is read as a width or a height.this.config.positionsizeXuiDrawerSizeHow far the drawer extends from its edge — a width for left/right, a height for top/bottom.this.config.sizecanEscapeKeyClosebooleanLet Escape close the drawer.this.config.canEscapeKeyClosecanOutsideClickClosebooleanLet a click on the backdrop close the drawer.this.config.canOutsideClickCloseshowCloseButtonbooleanShow the × in the header.this.config.showCloseButtonopenbooleanWhether the drawer is showing. Two-way bindable with [(open)].falseMethods
show(): voidclose(): void