MultiSelectToggleMixin

Basic keyboard/tap toggle UI for a multi-select list-like element
OVERVIEW | USAGE | API

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:

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:

Acai Akee Apple Apricot Avocado Banana Bilberry Black sapote Blackberry Blackcurrant Blood orange Blueberry Boysenberry Cantaloupe Cherimoya Cherry Chico fruit Clementine Cloudberry Coconut Crab apple Cranberry Cucumber Currant Damson Date Dragonfruit Durian Elderberry Feijoa Fig Goji berry Gooseberry Grape Grapefruit Guava Honeyberry Honeydew Horned melon Huckleberry Jabuticaba Jackfruit Jambul Japanese plum Jostaberry Jujube Juniper berry Kiwifruit Kumquat Lemon Lime Longan Loquat Lychee Mandarin Mango Mangosteen Marionberry Miracle fruit Mulberry Nance Nectarine Orange Papaya Passionfruit Peach Pear Persimmon Pineapple Pineberry Plantain Plum Pluot Pomegranate Pomelo Purple mangosteen Quince Rambutan Raspberry Redcurrant Salak Salal berry Salmonberry Satsuma Soursop Star apple Star fruit Strawberry Surinam cherry Tamarillo Tamarind Tangerine Ugli fruit Watermelon White currant White sapote Yuzu
Demo: A MultiSelectListBox lets you toggle items with touch/mouse or keyboard ⇲

API

Used by classes MultiSelectListBox and PlainMultiSelectListBox.