Lists and Selection

Lists & Selection

Components for picking from a list of items or paging through a collection.

SelectList

Vertical list of selectable rows bound to a State<T>. Clicking a row writes that item to the state; the row whose value equals the current state value renders with selectedRowStyle.

<T> SelectList(State<T> selection, List<T> items)
<T> SelectList(State<T> selection, List<T> items, Function<T, UIComponent> renderer)
<T> SelectList(State<T> selection, List<T> items, Style rowStyle, Style selectedRowStyle)
<T> SelectList(State<T> selection, List<T> items, Function<T, UIComponent> renderer,
               Style rowStyle, Style selectedRowStyle)

record Player(UUID id, String name) {}

State<Player> selected = State.of(null);
List<Player> players = List.of(/* ... */);

SelectList(selected, players,
           p -> Text(p.name(), Style.fontSize(12).build()),
           Style.padding(4, 8).build(),
           Style.padding(4, 8).backgroundColor(0xFF_00_AA_FF).build());

If you don't pass a renderer, items default to Text(String.valueOf(item)).

The list itself is a vertically-stacked UIComponent — wrap it in a VScroll when the row count exceeds the viewport.

ComboBox

Drop-down selector bound to a State<T>. Closed: a button-like trigger displays the current selection (or placeholder). Open: a popover lists every item; click an item to select and close, or click outside to dismiss.

<T> ComboBox(State<T> selection, List<T> items)
<T> ComboBox(State<T> selection, List<T> items, Function<T, String> labeler)
<T> ComboBox(State<T> selection, List<T> items, Function<T, String> labeler, String placeholder)
<T> ComboBox(State<T> selection, List<T> items, Function<T, String> labeler,
             Style triggerStyle, Style popoverStyle)
<T> ComboBox(State<T> selection, List<T> items, Function<T, String> labeler,
             Style triggerStyle, Style popoverStyle,
             Style itemStyle, Style selectedItemStyle,
             String placeholder)

State<String> theme = State.of("dark");

ComboBox(theme,
         List.of("light", "dark", "auto"),
         t -> "Theme: " + t,
         "Pick one...");

The popover renders through the screen's overlay queue, so it can extend past its parent's clip without being cut off. Click handling is wired through the UIContext popup-handler stack so an outside click both dismisses the popover and (when applicable) propagates to the click target underneath.

Default placeholder when none is supplied: "Select…".

Pagination

Page navigator bound to a State<Integer> (1-indexed page number). Renders a row of clickable buttons: first / prev / numbered window / next / last with ellipsis collapse.

Pagination(State<Integer> state, int totalPages)
Pagination(State<Integer> state, int totalPages, int siblings)
Pagination(State<Integer> state, int totalPages, Style buttonStyle, Style activeStyle)
Pagination(State<Integer> state, int totalPages, int siblings, Style buttonStyle, Style activeStyle)

State<Integer> page = State.of(1);

Pagination(page, /* total */ 24, /* siblings */ 2);

siblings controls the window of pages shown around the current one (default 2, so a 5-wide window). 0 produces a minimal first / current / last layout with no neighbors.

Pair with Dynamic(page, p -> /* render page p */) to drive the page contents:

Column(
    Pagination(page, totalPages),
    Dynamic(page, p -> renderPage(items, p))
);