单行文本输入组件。支持图标装饰、浮动标签和实时同步。对齐 Microsoft Fluent UI Blazor TextField (v4.13.2) 的 API 结构，并说明 NextUI 当前实现状态。
使用场景
约束说明
Value 仅支持字符串。FloatingLabel 启用时占位符会隐藏。
行为说明
Immediate 为真时在输入中触发 ValueChanged。ImmediateDelay 可延迟同步。
API
Parameters (参数)
| 状态 |
参数名 |
类型 |
默认值 |
描述 |
| Implemented |
Value |
string? |
"" |
输入框当前值。 |
| Implemented |
Placeholder |
string? |
"" |
无内容时的占位文案。 |
| Implemented |
Type |
TextFieldType |
Text |
输入类型。 |
| Implemented |
Appearance |
SxInputAppearance |
Outline |
视觉风格。 |
| Implemented |
Label |
string? |
null |
顶部标签文本。 |
| Implemented |
LabelTemplate |
RenderFragment? |
null |
自定义标签模版。 |
| Implemented |
FloatingLabel |
bool |
false |
是否启用浮动标签。 |
| Implemented |
IconStart |
string? |
null |
前置图标名。 |
| Implemented |
IconEnd |
string? |
null |
后置图标名。 |
| Implemented |
IconStartContent |
RenderFragment? |
null |
前置图标内容。 |
| Implemented |
IconEndContent |
RenderFragment? |
null |
后置图标内容。 |
| Implemented |
IconStyle |
IconStyle |
Regular |
图标风格。 |
| Implemented |
ReadOnly |
bool |
false |
是否只读。 |
| Implemented |
Required |
bool |
false |
是否必填。 |
| Implemented |
MaxLength |
int? |
null |
最大字符数。 |
| Implemented |
MinLength |
int? |
null |
最小字符数。 |
| Implemented |
AutoComplete |
string? |
null |
浏览器自动完成提示。 |
| Implemented |
Autofocus |
bool |
false |
自动获取焦点。 |
| Implemented |
Spellcheck |
bool? |
null |
拼写检查。 |
| Implemented |
AriaLabel |
string? |
null |
aria-label。 |
| Implemented |
Size |
int? |
null |
输入框可视宽度。 |
| Implemented |
Immediate |
bool |
false |
是否即时同步。 |
| Implemented |
ImmediateDelay |
int |
0 |
即时同步延迟 (ms)。 |
| Implemented |
Compact |
bool |
false |
紧凑样式。 |
| Implemented |
Borderless |
bool |
false |
无边框样式。 |
| Implemented |
AccessKey (继承) |
string? |
null |
快捷键。 |
| Implemented |
TabIndex (继承) |
int? |
null |
Tab 顺序。 |
| Implemented |
Disabled (继承) |
bool |
false |
禁用状态。 |
| Implemented |
Loading (继承) |
bool |
false |
加载状态。 |
| 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 |
捕获不匹配的 HTML 属性。 |
| Not Implemented |
ValueExpression |
Expression<Func<string>>? |
null |
数据绑定验证表达式。 |
Events (事件)
| 状态 |
事件名 |
类型 |
描述 |
| Implemented |
OnBlur |
EventCallback<FocusEventArgs> |
失去焦点时触发。 |
| Implemented |
OnFocus |
EventCallback<FocusEventArgs> |
获得焦点时触发。 |
| Implemented |
OnInput |
EventCallback<ChangeEventArgs> |
用户每次输入时触发。 |
| Implemented |
ValueChanged |
EventCallback<string?> |
值改变时触发。 |
Methods (方法)
| 状态 |
方法名 |
返回值 |
描述 |
| Implemented |
FocusAsync |
ValueTask |
使输入框获得焦点。 |
| Implemented |
SelectAsync |
ValueTask |
选中输入框内的文本。 |
示例
<SxInput @bind-Value="_username" Label="用户名" Placeholder="请输入账号" />
<SxInput @bind-Value="_password" Type="TextFieldType.Password" Label="密码" IconStart="lock" />
参考设计 (References)
