Overview
tng-drawer is a slide-out panel (left, right, top, bottom). Control visibility with [open]; handle (closed) to set open to false. Closes on backdrop click and Escape by default. Supports focus trap. Use placement and class hooks (backdropKlass, panelKlass, sizeKlass, heightKlass).
Quick example
Basic
<button (click)="open.set(true)">Open drawer</button>
<tng-drawer [open]="open()" (closed)="open.set(false)" placement="right">
<div class="p-4">... <button (click)="open.set(false)">Close</button></div>
</tng-drawer>
import { TngDrawer } from '@tailng-ui/ui/navigation';
open = signal(false);Features
Controlled open
[open] and (closed). Close reasons: outside-click, escape, programmatic.
Placement
placement: left | right | top | bottom. sizeKlass / heightKlass for dimensions.