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>

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.

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.