Overlay

Drawer

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

Features6

API

Theming

Basic

<tx-drawer [(visible)]> slides in from the right. txDrawerFooter holds the actions; txDialogClose closes it.

Published

24 lines

<div class="row">  <button    txButton    icon="filter"    severity="secondary"    [outlined]="true"    (click)="visible.set(true)"  >    Filters  </button>  <span class="summary">{{ summary() }}</span></div><tx-drawer header="Filters" [(visible)]="visible">  <fieldset class="group">    <legend>Status</legend>    @for (status of statuses; track status) {      <tx-checkbox [label]="status" [binary]="true" [(ngModel)]="checked[status]" />    }  </fieldset>  <div txDrawerFooter>    <button txButton severity="secondary" [text]="true" (click)="reset()">Reset</button>    <button txButton txDialogClose (click)="apply()">Apply</button>  </div></tx-drawer>

Positions

position picks the edge. With reduced motion the drawer appears without sliding.

20 lines

<div class="row">  @for (edge of edges; track edge) {    <button      txButton      severity="secondary"      [outlined]="true"      (click)="position.set(edge); visible.set(true)"    >      {{ edge }}    </button>  }</div><tx-drawer  [header]="'From the ' + position()"  [position]="position()"  size="small"  [(visible)]="visible">  Slides in from the {{ position() }} edge. Press Escape or click outside to close.</tx-drawer>

Sizes

size takes a preset or a CSS length.

16 lines

<div class="row">  @for (option of sizes; track option) {    <button      txButton      severity="secondary"      [outlined]="true"      (click)="size.set(option); visible.set(true)"    >      {{ option }}    </button>  }</div><tx-drawer [header]="'Size: ' + size()" [size]="size()" [(visible)]="visible">  Presets come from the dialog tokens (<code>drawer.sm</code>, <code>drawer.md</code>,  <code>drawer.lg</code>); any CSS length works too.</tx-drawer>

Non modal

[modal]="false" leaves the page usable: no mask, no focus trap, page scroll stays on.

22 lines

<button  txButton  icon="question-circle"  severity="secondary"  [outlined]="true"  (click)="visible.set(!visible())">  {{ visible() ? 'Hide help' : 'Show help' }}</button><tx-drawer  header="Help"  size="small"  [modal]="false"  [autoFocus]="'none'"  [restoreFocus]="false"  [(visible)]="visible">  <p>    The page stays usable while this panel is open — keep reading, scroll and click as usual.  </p>  <p>Close it with the button in its header or with Escape.</p></tx-drawer>

Service

TxDialogService.open(Component, { drawer: 'right' }) opens a component as a drawer; data and results work as for dialogs.

13 lines

<tx-dialog-header [title]="'Order ' + order.id" [subtitle]="order.customer" /><tx-dialog-content>  <ul class="items">    @for (item of order.items; track item) {      <li>{{ item }}</li>    }  </ul>  <p>Total: <tx-amount currency="USD" [amount]="order.total" [strong]="true" /></p></tx-dialog-content><tx-dialog-footer>  <button txButton severity="secondary" txDialogClose>Close</button>  <button txButton [txDialogClose]="'refund'">Refund</button></tx-dialog-footer>

Design tokens

Drawers use the dialog tokens; dt changes them for one drawer — here a transparent mask.

15 lines

<button txButton severity="secondary" [outlined]="true" (click)="visible.set(true)">  Open a floating drawer</button><tx-drawer  header="Floating"  size="small"  [(visible)]="visible"  [dt]="{    root: { background: 'var(--tx-surface-card)' },    mask: { background: 'transparent' },    header: { padding: '24px 24px 8px' },  }">  A drawer without a dimmed page.</tx-drawer>