专用于数值输入的组件。支持步长控制、范围限制和基础交互。对齐 Microsoft Fluent UI Blazor NumberField (v4.13.2) 的 API 结构,并说明 NextUI 当前实现状态。
使用场景
约束说明
Value 为泛型数值类型,需可被转换。
Min/Max 使用字符串以兼容不同数值类型。
行为说明
Immediate 为真时在输入中实时更新。
HideStep 为真时隐藏微调按钮。
API
Parameters (参数)
| 状态 |
参数名 |
类型 |
默认值 |
描述 |
| Implemented |
Value |
TValue? |
default |
输入框的当前数值。 |
| Implemented |
Label |
string? |
null |
顶部标签文本。 |
| Implemented |
Placeholder |
string? |
"" |
占位文案。 |
| Implemented |
Min |
string? |
null |
最小值。 |
| Implemented |
Max |
string? |
null |
最大值。 |
| Implemented |
Step |
string? |
"1" |
步长。 |
| Implemented |
Size |
int? |
null |
输入框可视宽度(字符数)。 |
| Implemented |
Appearance |
SxInputAppearance |
Outline |
输入风格。 |
| Implemented |
HideStep |
bool |
false |
是否隐藏步进按钮。 |
| Implemented |
Immediate |
bool |
false |
是否立即同步。 |
| Implemented |
ImmediateDelay |
int |
0 |
立即同步延迟。 |
| Implemented |
ReadOnly (继承) |
bool |
false |
只读状态。 |
| Implemented |
Required (继承) |
bool |
false |
必填状态。 |
| Implemented |
Disabled (继承) |
bool |
false |
禁用状态。 |
| Implemented |
Autofocus |
bool |
false |
自动聚焦。 |
| Implemented |
AriaLabel |
string? |
null |
aria-label。 |
| Implemented |
TabIndex (继承) |
int? |
null |
Tab 顺序。 |
| Implemented |
AccessKey (继承) |
string? |
null |
快捷键。 |
| Not Implemented |
DisplayName (继承) |
string? |
null |
验证字段名。 |
| Not Implemented |
ParsingErrorMessage |
string? |
null |
解析失败提示。 |
| Not Implemented |
ValueExpression (继承) |
Expression<Func<TValue>>? |
null |
绑定验证表达式。 |
| Implemented |
Id (继承) |
string? |
null |
组件 Id。 |
| Implemented |
Class (继承) |
string? |
null |
CSS 类名。 |
| Implemented |
Style (继承) |
string? |
null |
自定义样式。 |
| Implemented |
Title (继承) |
string? |
null |
HTML title。 |
| Implemented |
AdditionalAttributes (继承) |
IEnumerable<KeyValuePair<string, object>>? |
null |
额外属性。 |
Events (事件)
| 状态 |
事件名 |
类型 |
描述 |
| Implemented |
OnBlur |
EventCallback<FocusEventArgs> |
失去焦点时触发。 |
| Implemented |
OnFocus |
EventCallback<FocusEventArgs> |
获得焦点时触发。 |
| Implemented |
ValueChanged (继承) |
EventCallback<TValue?> |
值改变时触发。 |
Methods (方法)
| 状态 |
方法名 |
返回值 |
描述 |
| Implemented |
FocusAsync |
ValueTask |
使输入框获得焦点。 |
示例
<SxNumberInput @bind-Value="_age" Label="年龄" Min="0" Max="120" Step="1" />
参考设计 (References)