SxSearch (搜索框)
用于执行搜索操作的专用输入框。对齐 Microsoft Fluent UI Blazor Search (v4.13.2) 的 API 结构,并说明 NextUI 当前实现状态。
使用场景
约束说明
Value 为字符串。
- 清除按钮仅在可编辑且有值时显示。
行为说明
- 回车触发
OnSearch。
- 点击清除触发
OnClear。
API
Parameters (参数)
| 状态 |
参数名 |
类型 |
默认值 |
描述 |
| Implemented |
Value |
string? |
null |
当前输入值。 |
| Implemented |
Placeholder |
string |
"Search" |
占位文案。 |
| Implemented |
Label |
string? |
null |
顶部标签。 |
| Implemented |
Appearance |
SxInputAppearance |
Outline |
视觉风格。 |
| Implemented |
IconStart |
string |
"magnifying-glass" |
左侧图标名称。 |
| Implemented |
Borderless |
bool |
false |
是否使用无边框样式。 |
| Implemented |
Autofocus |
bool |
false |
自动聚焦。 |
| Implemented |
AriaLabel |
string? |
null |
aria-label。 |
| Implemented |
ReadOnly |
bool |
false |
只读状态。 |
| Implemented |
Required |
bool |
false |
必填状态。 |
| Implemented |
Disabled (继承) |
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 |
额外属性。 |
Events (事件)
| 状态 |
事件名 |
类型 |
描述 |
| Implemented |
OnClear |
EventCallback |
点击清除触发。 |
| Implemented |
OnSearch |
EventCallback<string> |
搜索触发。 |
| Implemented |
ValueChanged |
EventCallback<string?> |
值变化触发。 |
示例
<SxSearch Placeholder="搜索..." OnSearch="@OnSearch" />
参考设计 (References)