Sheet

An overlay panel sliding from an edge.

import { BuiSheet } from 'ng-blatui';

<button (click)="open.set(true)">Open</button>
<bui-sheet [(open)]="open" side="right">…</bui-sheet>

Left side

<bui-sheet [(open)]="open" side="left">…</bui-sheet>

Bottom side

<bui-sheet [(open)]="open" side="bottom">…</bui-sheet>

Scrollable

<bui-sheet [(open)]="open" side="right">
  <h2>Terms</h2>
  <div class="flex-1 overflow-y-auto">…long content…</div>
  <button buiButton>Accept</button>
</bui-sheet>

Static backdrop

closeOnOverlay="false" keeps a long form open when a stray click lands on the backdrop. It governs the backdrop only — Escape and your own close button stay wired, because a dialog you can't leave from the keyboard is a trap.

<!-- A stray click on the backdrop no longer discards the form. Escape still closes. -->
<bui-sheet [(open)]="open" side="right" [closeOnOverlay]="false">…</bui-sheet>

API reference

Inputs

Prop	Type	Default	Description
`side`	`"bottom" \| "left" \| "right" \| "top"`	`'right'`	Screen edge the sheet slides in from.
`ariaLabel`	`string`	`'Sheet'`	Accessible label applied to the sheet dialog.
`closeOnOverlay`	`boolean`	`true`	Whether clicking the backdrop closes the sheet. Set `false` for a static backdrop — a long form a stray click shouldn't discard. It governs the backdrop and nothing else: Escape stays wired, because a dialog you can't leave from the keyboard is a trap.

Two-way models

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

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

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