moonstone/ Editable Integer Picker
Exports the moonstone/EditableIntegerPicker.EditableIntegerPicker and moonstone/EditableIntegerPicker.EditableIntegerPickerBase components
import EditableIntegerPicker from '@enact/moonstone/EditableIntegerPicker';
Members
EditableIntegerPickerComponent
moonstone/EditableIntegerPicker.EditableIntegerPicker is a component that lets the user select a number from a range of numbers.
By default, EditableIntegerPicker
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 onChange
events.
import EditableIntegerPicker from '@enact/moonstone/EditableIntegerPicker';
EditableIntegerPickerBaseComponent
moonstone/EditableIntegerPicker.EditableIntegerPickerBase is a component that lets the user select a number from a range of numbers. This version is not spottable. Developers are encouraged to use moonstone/EditableIntegerPicker.EditableIntegerPicker.
import {EditableIntegerPickerBase} from '@enact/moonstone/EditableIntegerPicker';
Properties
- aria-valuetext
Overrides the
aria-valuetext
for the picker. By default,aria-valuetext
is set to the current selected child value.- decrementIcon
Assign a custom icon for the decrementer. All strings supported by {moonstone/Icon.Icon} are supported. Without a custom icon, the default is used.
- disabled
When
true
, the EditableIntegerPicker is shown as disabled and does not generateonChange
{@glossary event}.- editMode
When
true
, an input will be displayed instead of the picker components.- incrementIcon
Assign a custom icon for the incrementer. All strings supported by {moonstone/Icon.Icon} are supported. Without a custom icon, the default is used.
- max
The maximum value selectable by the picker (inclusive).
- min
The minimum value selectable by the picker (inclusive).
- onInputBlur
A function to be run when there is a blur in the input
- onPickerItemClick
A function to be run when pickerItem is clicked. This enables the input field in the component
- orientation
Sets the orientation of the picker, whether the buttons are above and below or on the sides of the value. Must be either
'horizontal'
or'vertical'
.Default: 'horizontal'- padded
When
true
, pads the display value with zeros up to the number of digits of the value ofmin
or max`, whichever is greater.- step
Allow the picker to only increment or decrement by a given value. A step of
2
would cause a picker to increment from 10 to 12 to 14, etc.Default: 1- unit
Unit label to be appended to the value for display.
Default: ''- value
The current value of the Picker to be displayed.
Default: 0- width
Choose a specific size for your picker.
'small'
,'medium'
,'large'
, or set tonull
to assume auto-sizing.'small'
is good for numeric pickers,'medium'
for single or short word pickers,'large'
for maximum-sized pickers.You may also supply a number. This number will determine the minumum size of the Picker. Setting a number to less than the number of characters in your longest value may produce unexpected results.
Default: 'medium'- wrap
Should the picker stop incrementing when the picker reaches the last element? Set
wrap
to true to allow the picker to continue from the opposite end of the list of options.