enact logoEnact
Edit on GitHub

moonstone/ExpandableList

Moonstone styled expandable list.

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

Members

ExpandableListComponent

A component that renders a 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

A stateless component that renders a 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 content using children.

NOTE: When providing an array of objects be sure a unique key is assigned to each item. Read about keys for more information.

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.

data-webos-voice-disabled
Boolean

Disables voice control.

disabled
Boolean

Disables ExpandableList 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

Keeps the expandable open when the user navigates to the title of the component using 5-way controls and the user must select/tap the title to close the expandable.

This does not affect closeOnSelect.

Default: false
noLockBottom
Boolean

Allows the user to move 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

Called when the component is removed while retaining focus.

onSpotlightLeft
Function

Called prior to focus leaving the expandable when the 5-way left key is pressed.

onSpotlightRight
Function

Called prior to focus leaving the expandable when the 5-way right key is pressed.

open
Boolean

Opens the expandable 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
NumberArrayNumber

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

spotlightDisabled
Boolean

Disables spotlight navigation into the component.

Default: false
ArrayBooleanFunctionModuleNumberObjectString