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.
| Key | What it does |
|---|---|
| Tab | Moves focus into the list, to the selected option, or to the first where none is selected. |
| Up, Down | Move to the previous or next option and select it. |
| Home, End | Move to the first or last option and select it. |
API
| Item | Summary |
|---|---|
Listbox::new | An empty list named label for assistive technology. |
option | Adds an option labeled title that selects value. |