Overview
Purpose: provides basic keyboard/tap toggle UI for a multi-select list-like element.
This mixin works at the beginning of the Elix render pipeline:
events ➞ methods → setState → render DOM → post-render
Expects the component to provide:
keydown
handler that invokes ainternal.keydown
method, typically using KeyboardMixin.internal.toggleSelectedFlag
method, typically via ItemsMultiSelectMixin.
Provides the component with:
- touch/mouse handling that lets the user toggle an item by clicking it.
- keyboard handling that lets the user toggle the current item by pressing Space.
Usage
import ItemsMultiSelectMixin from "elix/src/base/ItemsMultiSelectMixin.js";
import KeyboardMixin from "elix/src/base/KeyboardMixin.js";
import MultiSelectToggleMixin from "elix/src/base/MultiSelectToggleMixin.js";
class MyElement extends ItemsMultiSelectMixin(
KeyboardMixin(MultiSelectToggleMixin(HTMLElement))
) {}
MultiSelectToggleMixin
provides the toggle UI in this MultiSelectListBox:
Demo: A MultiSelectListBox lets you toggle items with touch/mouse or keyboard
⇲
API
Used by classes MultiSelectListBox and PlainMultiSelectListBox.