CUI

Components / Selection

Segmented control

A compact set of two to five choices where one is always selected, for switching between views of the same content.

Functions: cui_segmented

Segmented control

Usage

static int view = 0;
const char *items[] = { "List", "Board", "Timeline" };
const char *icons[] = { CUI_ICON_LIST, CUI_ICON_LAYOUT_DASHBOARD, CUI_ICON_HISTORY };
cui_segmented(ui, "view", items, 3, &view, .icons = icons);

The highlight's two edges have their own springs: the leading one runs ahead and the trailing one follows, so it stretches toward the new option and draws in as it lands. Keyboard: arrows move the selection.

Returns true on the frame the selection changes. view is your int, the index of the selected option. The control writes it on a click and keeps it between 0 and count - 1; set it from code and the highlight glides there. items and icons are your arrays, read every frame, and icons needs an entry or NULL for each option. For pages of different content use tabs, and for options that can each be on or off use a toggle group.

Keyboard

  • Arrows move the selection.

Options of cui_segmented

OptionTypeDefaultDescription
.sizecui_control_sizeOne of CUI_SIZE_MD, CUI_SIZE_SM or CUI_SIZE_LG.
.full_widthboolStretches to the width of its container.
.iconsconst char *const *One icon per item, in the same order as the items.

Related

  • Toggle group: A row of joined toggle buttons, each on or off, or exactly one on at a time.
  • Checkbox, switch and radio: The three basic choices: a checkbox for an option, a switch for a setting that applies at once, and radio buttons for one of several.
  • Slider: Picks a number, or a range with two thumbs, by dragging along a track.
  • Chips and rating: A chip is a small toggle for filters and tags. A rating picks a number of stars.