Components / Feedback
Banner and countdown
A full-width announcement that can be dismissed, and a countdown to a moment in time.
Functions: cui_banner, cui_countdown, cui_time
Usage
static bool show_update = true;
if (cui_banner(ui, "Version 1.1 is ready to install.", &show_update, .action = "Restart", .dismissible = true)) restart();
cui_countdown(ui, "launch", launch_time - cui_time(ui));
cui_countdown(ui, "sale", sale_end - now, .compact = true, .hide_days = true);The banner spans its container, tinted with its tone (the accent by default), and collapses smoothly when dismissed. The countdown shows days, hours, minutes and seconds as tiles whose digits roll; it schedules its own redraw each second.
cui_banner returns true on the frame its action link is clicked. show_update is your bool: the dismiss button sets it to false, and setting it back to true shows the banner again. With NULL the banner is always shown and has no dismiss button. The banner keeps its state by its text, so a text that changes needs a fixed key: "3 updates ready###updates".
cui_countdown returns nothing and keeps no clock: pass the seconds that are left on every frame, usually a deadline minus cui_time(ui). A negative value shows as zero. hide_days folds the days into the hours, and compact draws small tiles with colons and no labels.
Keyboard
- The banner's action and dismiss buttons take Tab, and Enter or Space presses the focused one. The countdown only displays.
Options of cui_banner
| Option | Type | Default | Description |
|---|---|---|---|
.tone | cui_tone | One of CUI_TONE_NEUTRAL, CUI_TONE_INFO, CUI_TONE_SUCCESS, CUI_TONE_WARNING, CUI_TONE_DANGER, CUI_TONE_VIOLET, CUI_TONE_TEAL, CUI_TONE_ROSE or CUI_TONE_ACCENT. | |
.icon | const char * | An icon: a CUI_ICON_* constant, or a string from another icon font. | |
.action | const char * | label of a button in the banner; the call returns true when it is clicked | |
.dismissible | bool | Shows a close button. |
Options of cui_countdown
| Option | Type | Default | Description |
|---|---|---|---|
.hide_days | bool | no days tile; the hours tile counts the days in (49 hours, not 2 days and 1 hour) | |
.compact | bool | small tiles joined by colons, without the unit names under them |
Related
- Onboarding checklist: A card with a progress ring and steps; the first unfinished step opens to show its description and action button.
- Empty state: What to show where there is nothing yet: an icon, a title, a line of help and an action.
- Undo toast: A toast with an Undo action and a visible timer, for actions that can be taken back.
- Progress, meter, spinner and skeleton: Ways to show waiting and amounts: a progress bar, a meter against a limit, a spinner, a gauge and placeholder shapes for content that is loading.