Components / Overlays

Sheet

A panel that slides in from an edge.

Functions: cui_sheet

Usage

static bool open;
if (cui_button(ui, "Notifications")) open = true;
cui_sheet(ui, "Notifications", &open, .side = CUI_SIDE_RIGHT, .size = 400) { ... }

Content scrolls.

open is your bool: the sheet shows while it is true, and the close button, a click on the dimmed window behind and the close key set it to false. Call cui_sheet on every frame, not inside the if that opens it. The block runs while the sheet is on screen, which includes the slide out after open turns false. side is CUI_SIDE_RIGHT (the default), CUI_SIDE_LEFT, CUI_SIDE_BOTTOM or CUI_SIDE_TOP. size is the width in points for a left or right sheet and the height for a top or bottom one; it defaults to 400. description adds a line under the title, and the title is also the sheet's identity. Use a sheet for detail beside the page, and a dialog for a short decision.

Keyboard

• Tab stays inside the open sheet, and Esc closes it.

Options of cui_sheet

Option	Type	Default	Description
.side	cui_side		One of CUI_SIDE_RIGHT, CUI_SIDE_LEFT, CUI_SIDE_BOTTOM or CUI_SIDE_TOP.
.size	float		Size in points; 0 uses the component's own.
.description	const char *		A second line of smaller text.

Related

• Button: Starts an action when clicked. It comes in six variants and three sizes, with an optional icon and a loading state.
• Command palette: A search box over the app's commands, opened with a shortcut.
• Dialog: A modal window for a decision or a short form, which blocks the rest of the app until it is closed.
• Hover card: A preview card that opens when the pointer rests on a link, a button or another component that reacts to the pointer.