Components / Data display

List and tree

List rows with an avatar or an icon, a title and a detail line, and a tree of items that fold.

Functions: cui_list_item, cui_tree_begin, cui_tree_clicked, cui_tree_end

Usage

if (cui_list_item(ui, "Design review", .avatar = "Jonas Berg", .subtitle = "Tomorrow at 10:00", .trailing = "45m")) open();

static bool src_open = true;
if (cui_tree_begin(ui, "src", &src_open, NULL)) {
    cui_tree_begin(ui, "main.c", NULL, &(cui_tree_opts){ .leaf = true, .selected = true });
    if (cui_tree_clicked(ui)) open_file("main.c");
    cui_tree_end(ui);
}

Tree keyboard: Right opens, Left closes.

cui_list_item returns true on the frame the row is clicked. It keeps no selection: pass .selected from your own state. The title is also the identity, so two rows with the same title in one scope need a key ("Notes##2"). avatar is a person's name and takes the place of icon.

cui_tree_begin returns true while the node is open, and only then do you add its children and call cui_tree_end. A leaf never opens, so it gets no cui_tree_end, as main.c shows above. The third argument points at your bool, which a click on the node flips; pass NULL for a leaf. cui_tree_clicked is true on the frame the node of the last cui_tree_begin was clicked, so ask right after that call. Children are scoped by their parent, so the same name in two folders is fine. For a tree with columns, use the tree table.

Keyboard

• Tree keyboard: Right opens, Left closes.

Options of cui_list_item

Option	Type	Default	Description
.icon	const char *		An icon: a CUI_ICON_* constant, or a string from another icon font.
.subtitle	const char *		second line under the title, smaller; makes the row taller
.trailing	const char *		muted text at the right edge, e.g. a time or a count
.selected	bool		drawn with the active background
.avatar	const char *		a name: shows that person's avatar (initials) in place of the icon

Options of cui_tree_begin

Option	Type	Default	Description
.icon	const char *		An icon: a CUI_ICON_* constant, or a string from another icon font.
.leaf	bool		a node without children: no chevron, a file icon, and *open is left alone
.selected	bool		drawn with the active background and medium weight text

Related

• Accordion: Sections that fold open and closed under their headers.
• Table: Rows and columns of your data, with sortable headers, selectable rows and any component in a cell.
• Timeline and progress ring: A vertical list of events in order, and a ring that fills with a percentage.
• Reorderable list: A list whose rows the user drags into a new order.