moonstone/ Expandable Picker
Exports the moonstone/ExpandablePicker.ExpandablePicker and moonstone/ExpandablePicker.ExpandablePickerBase components. The default export is moonstone/ExpandablePicker.ExpandablePicker.
import ExpandablePicker from '@enact/moonstone/ExpandablePicker';
Members
ExpandablePickerComponent
moonstone/ExpandablePicker.ExpandablePicker is a stateful component that renders a list of items into a picker that allows the user to select only a single item at a time. It supports increment/decrement buttons for selection.
By default, ExpandablePicker
maintains the state of its value
property. Supply the
defaultValue
property to control its initial value. If you wish to directly control updates
to the component, supply a value to value
at creation time and update it in response to
onPick
events.
ExpandablePicker
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 ExpandablePicker from '@enact/moonstone/ExpandablePicker';
ExpandablePickerBaseComponent
moonstone/ExpandablePicker.ExpandablePickerBase is a stateless component that renders a list of items into a picker that allows the user to select only a single item at a time. It supports increment/decrement buttons for selection.
import {ExpandablePickerBase} from '@enact/moonstone/ExpandablePicker';
Properties
- children
Children from which to pick
- decrementIcon
A custom icon for the decrementer. All strings supported by {Icon} are supported. Without a custom icon, the default is used, and is automatically changed when the {Icon#orientation} is changed.
- disabled
When
true
, applies a disabled style and the control becomes non-interactive.- incrementIcon
A custom icon for the incrementer. All strings supported by {Icon} are supported. Without a custom icon, the default is used, and is automatically changed when the {Icon#orientation} is changed.
- joined
The user interaction of the control. A joined picker allows the user to use the arrow keys to adjust the picker's value. The user may no longer use those arrow keys to navigate while this control is focused. A non-joined control allows full navigation, but requires individual ENTER presses on the incrementer and decrementer buttons. Pointer interaction is the same for both formats.
- noAnimation
By default, the picker will animate transitions between items if it has a defined
width
. SpecifyingnoAnimation
will prevent any transition animation for the component.- onChange
Callback to be called when the control should increment or decrement.
- onClose
Callback to be called when a condition occurs which should cause the expandable to close
- onPick
Callback to be called when an item is picked.
- onSpotlightDisappear
The handler to run when the component is removed while retaining focus.
- onSpotlightDown
The handler to run prior to focus leaving the expandable when the 5-way down key is pressed.
- 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 control is rendered in the expanded state, with the contents visible- orientation
The orientation of the picker, i.e. whether the buttons are above and below or on the sides of the value. Must be either
'horizontal'
or'vertical'
.Default: 'horizontal'- spotlightDisabled
When
true
, the component cannot be navigated using spotlight.Default: false- value
Index of the selected child
Default: 0