Listbox

Pick option(s) from a list of options. binding any.

在一组选项中选择一个或一些。

1 L listbox.tsSource Code

1 L VListbox.vueSource Code

Code

Spec

html

<div role="listbox">
	<div role="option"></div>
	<div role="group">
		<h6>Title</h6>
		<div role="option"></div>
	</div>
</div>

Command List
/	Navigates to prev. Add current option and remove other selection.
/	Navigates to next. Add current option and remove other selection.
	Navigates to the beginning. Add current option and remove other selection.
	Navigates to the end. Add current option and remove other selection.
/	Navigates to prev.
/	Navigates to next.
	Navigates to the beginning.
	Navigates to the end.
/ /	Add options while navigation.
/ /	Add options while navigation.
	Toggle current option. `toggle(value)`
	Add target option and remove other selection.
	Toggle target option.
	Add options between target and current option.
	current.

Listbox options input supports any type of option values, values are keys (Symbol || (typeof value + value)).

Listbox can have multiple selection when model Array.isArray().

Listbox options input supports one level grouping.

This is an simple styled example, see how it handles keyboard events and and .

Code

VListbox Props	Description
`model`	Value binding, listbox will in multiple mode if model `Array.isArray()`.
`clearable`	While in single option mode, select the same option will unselect it.
`options`	Listbox inputs support any type of value, support one level grouping.
`disabled`
`listbox`	Omit all other props.

Listbox API	Description
`id`	The `id` for creating `aria-activedescendant` to indicate current focused option.
`multi`	model `Array.isArray()`
`tree`	Contains the original (grouped) hierarchy and extra info to rendering the UI.
`options`	List of options after flatten and normalized, which are objects with `value` property.
`current`	Current focuing option index (after options are flatted)
`nav(delta:number, circular?:boolean)`	Move focus based on the delta number, skipping `disabled` options. If `circular`, `nav()` will across two edges like radios. delta can be `-1`(prev) `1`(next) `-Infinity`(Home) `Infinity`(End)
`input(...values:any[])`	Toggle selection for value(s). Will validate `disabled` state. Passing `listbox` itself will toggle current value.