日本語

Listbox

A list of options of which one is selected, kept in a signal.

Result

listbox.rs
use hypersig::html::div;
use hypersig::style::Style;
use hypersig::style::value::rem;
use hypersig::{Page, Signals};
use hypersig_ui::Listbox;
use serde::{Deserialize, Serialize};

#[derive(Serialize, Deserialize, Clone, Copy, PartialEq)]
pub enum Font {
    Sans,
    Serif,
    Mono,
}

#[derive(Signals, Serialize, Deserialize)]
pub struct Editor {
    font: Font,
}

pub fn page() -> Page<Editor> {
    Page::new(
        "Editor",
        Editor { font: Font::Sans },
    )
    .child(
        div().css(Style::new().max_width(rem(16))).child(
            Listbox::new(
                "Font",
                Editor::font(),
            )
            .option(
                Font::Sans,
                "Sans serif",
            )
            .option(
                Font::Serif,
                "Serif",
            )
            .option(
                Font::Mono,
                "Monospace",
            ),
        ),
    )
}

Accessibility

It follows the WAI-ARIA listbox pattern for a single selection. The list has role="listbox" and each option role="option" with aria-selected. Focus moves between the options through El::roving_focus, and each option is selected as it gains focus. The ids are derived from the signal's path and the option's position.

KeyWhat it does
TabMoves focus into the list, to the selected option, or to the first where none is selected.
Up, DownMove to the previous or next option and select it.
Home, EndMove to the first or last option and select it.

API

ItemSummary
Listbox::newAn empty list named label for assistive technology.
optionAdds an option labeled title that selects value.