Components / Actions
Speed dial
A round floating button that fans out a few related actions.
Functions: cui_speed_dial
Usage
static const cui_speed_action acts[] = { { CUI_ICON_FILE_TEXT, "New note" }, { CUI_ICON_IMAGE, "Upload image" } };
int pick = cui_speed_dial(ui, "create", acts, 2, .tooltip = "Create");Clicking fans the actions out with a stagger while the plus morphs into a close icon. Esc or a click elsewhere folds them. placement controls the direction (above and right aligned by default).
Returns the index of the action that was clicked, or -1, and choosing an action folds the dial. acts is your array of icon and label pairs; a NULL label leaves only the round icon, and at most 16 actions are shown. The button is 52 points across and sits in the layout where you call it: only the fanned actions float, so pin it to a corner with a container placed there. CUI_PLACE_BOTTOM and CUI_PLACE_BOTTOM_END open the actions downward; CUI_PLACE_BOTTOM_START is the zero value and counts as not set.
Keyboard
- Esc or a click elsewhere folds them.
- Tab focuses the button, and Enter or Space opens or folds it. While it is open, Tab moves through the actions, Enter or Space chooses the focused one, and Esc folds the dial.
Options of cui_speed_dial
| Option | Type | Default | Description |
|---|---|---|---|
.icon | const char * | An icon: a CUI_ICON_* constant, or a string from another icon font. | |
.placement | cui_placement | One of CUI_PLACE_BOTTOM_START, CUI_PLACE_BOTTOM, CUI_PLACE_BOTTOM_END, CUI_PLACE_TOP_START, CUI_PLACE_TOP, CUI_PLACE_TOP_END, CUI_PLACE_RIGHT_START, CUI_PLACE_LEFT_START, CUI_PLACE_RIGHT or CUI_PLACE_LEFT. | |
.tooltip | const char * | Text shown when the pointer rests on it. |
cui_speed_action
| Field | Type | Description |
|---|---|---|
icon | const char * | An icon: a CUI_ICON_* constant, or a string from another icon font. |
label | const char * | A label shown above or beside the control. |
Related
- Theme switcher and toggle: Controls that switch the app between light, dark and the system theme.
- Reactions: Reaction buttons with a count each, as under a message or a post.
- User menu: An avatar, a name and a detail line that open an account menu with a header.
- Status button: A button that shows the progress of the work it started: a spinner while busy, then a check or an error.