Drawer

A slide-in panel anchored to an edge.

import { BuiDrawer } from 'ng-blatui';

<button (click)="open.set(true)">Open</button>
<bui-drawer [(open)]="open" direction="right">Panel content</bui-drawer>

From bottom

<bui-drawer [(open)]="open" direction="bottom">…</bui-drawer>

From left

<bui-drawer [(open)]="open" direction="left">…</bui-drawer>

Scrollable

<bui-drawer [(open)]="open" direction="right" class="w-80">
  <h2>Changelog</h2>
  <div class="flex-1 overflow-y-auto">…long content…</div>
  <button buiButton>Close</button>
</bui-drawer>

API reference

Inputs

Prop	Type	Default	Description
`direction`	`"bottom" \| "left" \| "right" \| "top"`	`'bottom'`	Screen edge the drawer is anchored to and slides in from.
`ariaLabel`	`string`	`'Drawer'`	Accessible label applied to the drawer dialog.

Two-way models

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`open`	`boolean`	`false`	Whether the drawer is open. Two-way bindable with `[(open)]`.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.