moonstone/ Expandable List
Exports the moonstone/ExpandableList.ExpandableList and moonstone/ExpandableList.ExpandableListBase components. The default export is moonstone/ExpandableList.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 •
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 thechildren
key.- title •
The primary text of the item.
- closeOnSelect
When
true
andselect
is not'multiple'
, the expandable will be closed when an item is selected.- disabled
When
true
, applies a disabled style and the control becomes non-interactive.- label
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
When
true
, the expandable will not automatically close when the user navigates to thetitle
of the component using 5-way controls.This does not affect
closeOnSelect
.Default: false- noLockBottom
When
true
, the user may move {@glossary Spotlight} past the bottom of the expandable (when open) using 5-way controls.Default: false- noneText
Text to display when no
label
is set.- onClose
Called when the expandable is closing. Also called when selecting an item if
closeOnSelect
istrue
.- onOpen
Called when the expandable is opening
- onSelect
Called when an item is selected
- onSpotlightDisappear
The handler to run when the component is removed while retaining focus.
- onSpotlightLeft
The handler to run prior to focus leaving the expandable when the 5-way left key is pressed.
- onSpotlightRight
The handler to run prior to focus leaving the expandable when the 5-way right key is pressed.
- open
When
true
, the expandable is open with its contents visible- select
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
Index or array of indices of the selected item(s)
- spotlightDisabled
When
true
, the component cannot be navigated using spotlight.Default: false