Overview
Purpose: exposes the text content of a list's items as an array of strings.
This mixin works toward the beginning of the Elix render pipeline:
events → setState → render DOM → post-render
Expects the component to provide:
[internal.state].items
state member, often via SlotItemsMixin or the lower-level ContentItemsMixin.
Provides the component with:
[internal.state].texts
state member containing an array of text strings corresponding to the text content of the current set of items.
Usage
import ItemsTextMixin from "elix/src/base/ItemsTextMixin.js";
import SlotItemsMixin from "elix/src/base/SlotItemsMixin.js";
class MyElement extends ItemsTextMixin(SlotItemsMixin(HTMLElement)) {}
Example
ItemsTextMixin
is useful for components that want to search the text content of a list's items. The related KeyboardPrefixCursorMixin can use the [internal.state].texts
member created by ItemsTextMixin
to let the user select an item by typing its first few characters.
API
Used by classes AutoCompleteComboBox, FilterComboBox, FilterListBox, ListBox, Menu, MultiSelectListBox, OptionList, PlainAutoCompleteComboBox, PlainFilterComboBox, PlainFilterListBox, PlainListBox, PlainMenu, PlainMultiSelectListBox, and PlainOptionList.
get Item Text(item) method
Extract the text from the given item.
The default implementation returns an item's aria-label
, alt
attribute, innerText
, or textContent
, in that order. You can override
this to return the text that should be used.
Parameters:
- item:
Element
–
Returns: string