enact logoEnact
Edit on GitHub

moonstone/ExpandablePicker

Moonstone styled expandable picker.

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

Members

ExpandablePickerComponent

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

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 •
Node

Picker value list.

checkButtonAriaLabel
String

The "aria-label" for the the check button.

data-webos-voice-disabled
Boolean

Disables voice control.

data-webos-voice-group-label
String

The data-webos-voice-group-label for ExpandableItem and Picker.

decrementAriaLabel
String

The "aria-label" for the decrement button.

Default: 'previous item'
decrementIcon
string

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 orientation is changed.

disabled
Boolean

Disables ExpandablePicker and the control becomes non-interactive.

incrementAriaLabel
String

The "aria-label" for the increment button.

Default: 'next item'
incrementIcon
String

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 orientation is changed.

joined
Boolean

Allows the user to use the arrow keys to adjust the picker's value.

Key presses are captured in the directions of the increment and decrement buttons but others are unaffected. A non-joined Picker allows navigation in any direction, but requires individual ENTER presses on the incrementer and decrementer buttons. Pointer interaction is the same for both formats.

noAnimation
Boolean

Prevents any transition animation for the component.

onChange
Function

Called when the control should increment or decrement.

onClose
Function

Called when a condition occurs which should cause the expandable to close.

onPick
Function

Called when an item is picked.

onSpotlightDisappear
Function

Called when the component is removed while retaining focus.

onSpotlightDown
Function

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

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 ExpandablePicker with the contents visible.

orientation
String

Orientation of the picker.

Controls whether the buttons are arranged horizontally or vertically around the value.

  • Values: 'horizontal', 'vertical'

Default: 'horizontal'
pickerAriaLabel
String

The "aria-label" for the picker.

spotlightDisabled
Boolean

Disables spotlight navigation into the component.

Default: false
value
Number

Index of the selected child.

Default: 0
ArrayBooleanFunctionModuleNumberObjectString