NumericPicker component
Use <NumericPicker>
to have a field for any kind of numeric values.
All basic types are supported, including nullable types
(int
, long
, float
, double
, decimal
, etc.).
Examples
Basic
<NumericPicker Value="123" />
Rules
Generic type
SinceNumericPicker
is a generic component you will have to specify the exact data type for the value.
Most of the time it will be recognized automatically when you set the Value
attribute, but if
not you will just use the TValue
attribute and define the type manually eg.
<NumericPicker TValue="decimal?" />
Curency symbols
The display format of theNumericPicker
can be adjusted to provide more context for the value it represents,
such as displaying currency. By defining the CurrencySymbol
parameter you can use any symbol. Additionally you can define the symbol position
with the CurrencySymbolPlacement
parameter.
<NumericPicker TValue="decimal?" CurrencySymbol="$" Value="456" />
Controlling the step value
Set the amount to increment or decrement the value when the spinner buttons are used with thestep
parameter.
<NumericPicker @bind-Value="" Step="10" />
@code{ decimal value; }
Setting the Min & Max
Set theMin
& Max
to limit the values allowed into the input.
<NumericPicker @bind-Value="" Min="10" Max="20" />
@code{ decimal value = 15; }
Integer values
To only allow the integer values without the decimals, you can set theDecimals="0"
<NumericPicker @bind-Value="" Decimals="0" />
@code{ int value; }
Attributes
NumericPicker is just a specialized version of TextEdit
component so all of the rules and styles are still working
all the same. See TextEdit to find the list of supported attributes.
Name | Description | Type | Default |
---|---|---|---|
TValue |
Generic type parameter used for the value attribute. | generic |
|
Value |
Gets or sets the value inside the input field. | TValue |
default |
ValueChanged |
Occurs after the value has changed. | EventCallback<TValue> |
|
Step |
Specifies the interval between valid values. | decimal? |
null |
Decimals |
Maximum number of decimal places after the decimal separator. | int |
2 |
DecimalSeparator |
String to use as the decimal separator in numeric values. | string |
"." |
AlternativeDecimalSeparator |
String to use as the alternative decimal separator in numeric values. | string |
"," |
GroupSeparator |
Defines the thousand grouping separator character. | string |
|
GroupSpacing |
Defines how many numbers should be grouped together (usually for the thousand separator). | string |
3 |
CurrencySymbol |
Defines the currency symbol to display. | string |
|
CurrencySymbolPlacement |
Placement of the currency sign, relative to the number shown (as a prefix or a suffix). | CurrencySymbolPlacement |
Prefix |
Culture |
Helps define the localization of an element (used for parsing of the value). | string |
null |
Min |
The minimum value to accept for this input. | TValue |
default |
Max |
The maximum value to accept for this input. | TValue |
default |
MinMaxLimitsOverride |
Override the minimum and maximum limits. | NumericMinMaxLimitsOverride |
Ignore |
Autofocus |
Set’s the focus to the component after the rendering is done. | bool |
false |
ShowStepButtons |
If true, step buttons will be visible. | bool? |
true |
EnableStep |
If true, enables change of numeric value by pressing on step buttons or by keyboard up/down keys. | bool? |
true |
SelectAllOnFocus |
If true, selects all the text entered in the input field once it receives the focus. | bool |
false |
RoundingMethod |
Method used for rounding decimal values. | NumericRoundingMethod |
HalfUpSymmetric |
AllowDecimalPadding |
Setting AllowDecimalPadding to 'false' will override the Decimals setting.
|
NumericRoundingMethod |
Always |
AlwaysAllowDecimalSeparator |
Defines if the decimal character or decimal character alternative should be accepted when there is already a decimal character shown in the element. | bool |
false |