128 lines
3.7 KiB
Markdown
128 lines
3.7 KiB
Markdown
# SbNumberField
|
|
|
|
A numeric input component with increment/decrement spin buttons, supporting min/max constraints and step increments.
|
|
|
|
## Parameters
|
|
|
|
| Parameter | Type | Default | Description |
|
|
|-----------|------|---------|-------------|
|
|
| Value | TNumber | - | The current numeric value (two-way bindable) |
|
|
| ValueChanged | EventCallback\<TNumber\> | - | Callback when value changes |
|
|
| Min | TNumber? | null | Minimum allowed value |
|
|
| Max | TNumber? | null | Maximum allowed value |
|
|
| Step | TNumber? | null | Step increment (defaults to 1) |
|
|
| ShowSpinButtons | bool | true | Whether to show increment/decrement buttons |
|
|
| Placeholder | string? | null | Placeholder text |
|
|
| Disabled | bool | false | Whether the field is disabled |
|
|
| ReadOnly | bool | false | Whether the field is read-only |
|
|
| Id | string? | null | Element ID |
|
|
| Label | string? | null | Label text displayed above the input |
|
|
| Required | bool | false | Whether the field is required |
|
|
| HelperText | string? | null | Helper or hint text shown below the input |
|
|
| Class | string? | null | Additional CSS classes |
|
|
| Style | string? | null | Inline styles |
|
|
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes for the input |
|
|
| IncreaseAriaLabel | string | "Increase" | Aria label for increase button |
|
|
| DecreaseAriaLabel | string | "Decrease" | Aria label for decrease button |
|
|
|
|
## Events
|
|
|
|
| Event | Type | Description |
|
|
|-------|------|-------------|
|
|
| ValueChanged | EventCallback\<TNumber\> | Fired when the value changes |
|
|
|
|
## Supported Types
|
|
|
|
The component supports any numeric struct type implementing `IComparable<T>`:
|
|
- `int`, `long`, `short`, `byte`
|
|
- `float`, `double`, `decimal`
|
|
|
|
## CSS Classes
|
|
|
|
- `sb-number-field` - Base class
|
|
- `sb-number-field__label` - Label element (stacked above input)
|
|
- `sb-number-field__required` - Required asterisk
|
|
- `sb-number-field__input-group` - Wrapper for input and spin buttons
|
|
- `sb-number-field__input` - The input element
|
|
- `sb-number-field__spinners` - Spin buttons container
|
|
- `sb-number-field__spinner` - Individual spinner button
|
|
- `sb-number-field__helper` - Helper text container
|
|
- `sb-number-field--disabled` - Disabled state
|
|
|
|
## Accessibility
|
|
|
|
- Uses native `<input type="number">`
|
|
- Spin buttons have appropriate aria-labels
|
|
- Min/max/step reflected in HTML attributes
|
|
- Keyboard: Arrow up/down to increment/decrement
|
|
|
|
## Examples
|
|
|
|
### Basic Usage
|
|
|
|
```razor
|
|
<SbNumberField TNumber="int" @bind-Value="quantity" Label="Quantity" />
|
|
```
|
|
|
|
### With Constraints
|
|
|
|
```razor
|
|
<SbNumberField TNumber="int"
|
|
@bind-Value="age"
|
|
Label="Age"
|
|
Min="0"
|
|
Max="150"
|
|
HelperText="Enter age between 0 and 150" />
|
|
```
|
|
|
|
### Decimal with Step
|
|
|
|
```razor
|
|
<SbNumberField TNumber="decimal"
|
|
@bind-Value="price"
|
|
Label="Price"
|
|
Min="0"
|
|
Step="0.01m" />
|
|
```
|
|
|
|
### Without Spin Buttons
|
|
|
|
```razor
|
|
<SbNumberField TNumber="int"
|
|
@bind-Value="year"
|
|
Label="Year"
|
|
ShowSpinButtons="false"
|
|
Min="1900"
|
|
Max="2100" />
|
|
```
|
|
|
|
### Percentage
|
|
|
|
```razor
|
|
<SbNumberField TNumber="int"
|
|
@bind-Value="percentage"
|
|
Label="Discount %"
|
|
Min="0"
|
|
Max="100"
|
|
Step="5" />
|
|
```
|
|
|
|
### Disabled State
|
|
|
|
```razor
|
|
<SbNumberField TNumber="int"
|
|
Value="42"
|
|
Label="Fixed Value"
|
|
Disabled="true" />
|
|
```
|
|
|
|
### Float with Precision
|
|
|
|
```razor
|
|
<SbNumberField TNumber="float"
|
|
@bind-Value="temperature"
|
|
Label="Temperature (°C)"
|
|
Min="-273.15f"
|
|
Step="0.1f" />
|
|
```
|