NumberField
Number field widget. Similar to native <input type="number">, but implemented as <input type="text"> to support
formatting.
//<code-header>
fiddle.title = 'Number field';
//</code-header>
new NumberField({
appendTo : targetElement,
width : 150,
label : 'Enter a number',
rendition : 'outlined',
labelPosition : 'above'
});
new NumberField({
appendTo : targetElement,
width : 150,
value : 0.25,
label : 'Percentage',
format : '0%',
style : 'margin-right: .5em',
labelPosition : 'above'
});
new NumberField({
appendTo : targetElement,
clearable : true,
width : 150,
label : 'Currency, clearable',
value : 100,
style : 'margin-right: .5em',
format : {
style : 'currency',
currency : 'USD'
},
labelPosition : 'above'
});
new NumberField({
appendTo : targetElement,
width : 200,
label : 'With custom trigger',
triggers : {
plug : {
cls : 'fa fa-plug',
tooltip : 'Do something special'
}
},
style : 'margin-right: .5em',
labelPosition : 'above'
});This field can be used as an editor for the Column. It is used as the default editor for the NumberColumn, PercentColumn, AggregateColumn.
const number = new NumberField({
min : 1,
max : 5,
value : 3
});
Provide a NumberFormat config as format to be able to show currency. For example:
new NumberField({
format : {
style : 'currency',
currency : 'USD'
}
});
//<code-header>
fiddle.title = 'Number field options';
//</code-header>
new NumberField({
appendTo : targetElement,
label : 'Enter a number',
style : 'margin-right: .5em'
});
new NumberField({
appendTo : targetElement,
clearable : true,
label : 'Clearable',
value : 100,
style : 'margin-right: .5em'
});
new NumberField({
appendTo : targetElement,
label : 'With custom trigger',
triggers : {
plug : {
cls : 'fa fa-plug',
tooltip : 'Do something special'
}
},
style : 'margin-right: .5em'
});Provide a pattern as format to display a value as percentage. The presence of a percent sign in the format string turns the percentage handling on. Note that the value passed as config or set programmatically has to be a decimal number. Numbers entered into the field are divided by 100. Excess digits will be rounded up or down.
Pattern description:
0-9: Significant digit#: Insignificant digit, will be omitted when zero.: Decimal separator%: Percent designator.
new NumberField({
format : '0.0#%',
value : 0.125
});
The resulting value displayed will be 12.5%.
Configs
115
Configs
115Common
Other
Controls how change events are triggered when stepping the value up or down using either spinners or arrow keys.
Configure with:
trueto trigger a change event per stepfalseto not trigger change while stepping. Will trigger on blur/Enter- A number of milliseconds to buffer the change event, triggering when no steps are performed during that period of time.
The format to use for rendering numbers.
For example:
format: '9,999.00##'
The above enables digit grouping and will display at least 2 (but no more than 4) fractional digits.
This can be set to 'number' to enable the numeric virtual keyboard on
mobile devices. Doing so limits this component's ability to handle keystrokes
and format properly as the user types, so this is not recommended for
desktop applications. This will also limit similar features of automated
testing tools that mimic user input.
Large step size, defaults to 10 * step. Applied when pressing SHIFT and stepping either by click or
using keyboard.
Note that when percent formatting format is configured, the step size is divided by 100
because the internal value is a fractional number.
Incrementing/decrementing by largeStep : 10 changes the value by 0.1, which equals 10%.
Max value
Min value
Predefined style to use for the field. Possible values are:
'outlined'(default)'filled'
The supplied value will be part of the field's class list, as b-text-field-{rendition}.
Step size for spin button clicks. Also used when pressing up/down keys in the field.
Note that when percent formatting format is configured, the step size is divided by 100
because the internal value is a fractional number.
Incrementing/decrementing by step : 1 changes the value by 0.01, which equals 1%.
Widgets that trigger functionality upon click. Each trigger icon is a Widget instance which may be hidden, shown and observed and styled just like any other widget.
| Parameter | Type | Description |
|---|---|---|
triggers.spin | FieldTriggerConfig | Shows up and down arrows to increase or decrease the field value based on the step |
triggers.clear | FieldTriggerConfig | Clears the field value, only present if this field is clearable |
Initial value
Reset to min value when max value is reached using steppers, and vice-versa.
DOM
Float & align
Input element
Label
Layout
Misc
Scrolling
Properties
84
Properties
84Class hierarchy
Other
Predefined style to use for the field. Possible values are:
'outlined'(default)'filled'
The supplied value will be part of the field's class list, as b-text-field-{rendition}.
Step size for spin button clicks.
Widgets that trigger functionality upon click. Each trigger icon is a Widget instance which may be hidden, shown and observed and styled just like any other widget.
| Parameter | Type | Description |
|---|---|---|
triggers.spin | FieldTriggerConfig | Shows up and down arrows to increase or decrease the field value based on the step |
triggers.clear | FieldTriggerConfig | Clears the field value, only present if this field is clearable |
CSS
DOM
Layout
Misc
Functions
65
Functions
65Other
Get/set the NumberField's value, or undefined if the input field is empty