Enact

moonstone/ExpandableList

import ExpandableList from '@enact/moonstone/ExpandableList';

Members

ExpandableListComponent

moonstone/ExpandableList.ExpandableList renders a moonstone/LabeledItem.LabeledItem that can be expanded to show a selectable list of items.

By default, ExpandableList maintains the state of its selected property. Supply the defaultSelected property to control its initial value. If you wish to directly control updates to the component, supply a value to selected at creation time and update it in response to onChange events.

ExpandableList maintains its open/closed state by default. The initial state can be supplied using defaultOpen. In order to directly control the open/closed state, supply a value for open at creation time and update its value in response to onClose/onOpen events.

import ExpandableList from '@enact/moonstone/ExpandableList';

ExpandableListBaseComponent

moonstone/ExpandableList.ExpandableListBase is a stateless component that renders a moonstone/LabeledItem.LabeledItem that can be expanded to show a selectable list of items.

import {ExpandableListBase} from '@enact/moonstone/ExpandableList';
Properties
children •
ArrayStringArrayObject

The items to be displayed in the list. This supports two data types. If an array of strings is provided, the strings will be used in the generated components as the readable text. If an array of objects is provided, each object will be spread onto the generated component with no interpretation. You'll be responsible for setting properties like disabled, className, and setting the text content using the children key.

title •
String

The primary text of the item.

closeOnSelect
Boolean

When true and select is not 'multiple', the expandable will be closed when an item is selected.

disabled
Boolean

When true, applies a disabled style and the control becomes non-interactive.

label
Node

The secondary, or supportive text. Typically under the title, a subtitle. If omitted, the label will be generated as a comma-separated list of the selected items.

Default: null
noAutoClose
Boolean

When true, the expandable will not automatically close when the user navigates to the title of the component using 5-way controls.

This does not affect closeOnSelect.

Default: false
noLockBottom
Boolean

When true, the user may move {@glossary Spotlight} past the bottom of the expandable (when open) using 5-way controls.

Default: false
noneText
String

Text to display when no label is set.

onClose
Function

Called when the expandable is closing. Also called when selecting an item if closeOnSelect is true.

onOpen
Function

Called when the expandable is opening

onSelect
Function

Called when an item is selected

onSpotlightDisappear
Function

The handler to run when the component is removed while retaining focus.

onSpotlightLeft
Function

The handler to run prior to focus leaving the expandable when the 5-way left key is pressed.

onSpotlightRight
Function

The handler to run prior to focus leaving the expandable when the 5-way right key is pressed.

open
Boolean

When true, the expandable is open with its contents visible

select
String

Selection mode for the list

  • 'single' - Allows for 0 or 1 item to be selected. The selected item may be deselected.

  • 'radio' - Allows for 0 or 1 item to be selected. The selected item may only be deselected by selecting another item.

  • 'multiple' - Allows 0 to n items to be selected. Each item may be selected or deselected.

Default: 'single'
selected
ArrayNumberNumber

Index or array of indices of the selected item(s)

spotlightDisabled
Boolean

When true, the component cannot be navigated using spotlight.

Default: false
ArrayBooleanFunctionModuleNumberObjectString