Component Listbox

Listbox

A scrollable single-select list. ↑ / ↓ / Home / End / Enter move highlight and pick; disabled options are skipped.

use yororen_ui::headless::listbox::{listbox, ListboxOption, ListboxState};

let listbox_state = ListboxState::new(&mut **cx);
listbox_state.update(cx, |s, _| {
    s.set_options(vec![
        ListboxOption::new("apple",  "Apple"),
        ListboxOption::new("banana", "Banana"),
        ListboxOption::new("cherry", "Cherry").disabled(true),
        ListboxOption::new("durian", "Durian"),
    ]);
    s.set_on_change({
        let entity = cx.entity();
        move |value, _, cx| entity.update(cx, |s, _| s.fruit = value.to_string());
    });
});

listbox("fruit", listbox_state).render(cx)

State methods

Method	Purpose
new(app)	Mint a fresh state. Returns Entity<Self>.
set_options(opts)	Replace the option list.
set_selected(v)	Seed the selected value (without firing on_change).
set_on_change(f)	Fn(SharedString, &mut Window, &mut App) + 'static + Send + Sync.
pick(value, w, cx)	Pick value (a SharedString).
select_highlighted(w, cx)	Pick the currently highlighted option.
highlight_next() / highlight_prev()	Move the highlighted option.

ListboxOption builders: new(value, label), .disabled(v).

.render(cx) returns Stateful<Div>. The keyboard-nav algorithm is shared with Select, ComboBox, and Menu via the ListNavigable trait, so all four option-list surfaces move highlight identically.

See also: Select, ComboBox, ListItem.