SxSelect (选择器)

  • Implemented

下拉列表选择组件。对齐 Microsoft Fluent UI Blazor Select (v4.13.2) 的 API 结构，并说明 NextUI 当前实现状态。

使用场景

  • 表单中的单选/多选选择
  • 过滤条件选择
  • 标签或角色分配

约束说明

  • Items/Options 为空时显示空状态或 EmptyTemplate。
  • Multiple 为真时使用 SelectedValues，否则使用 Value。
  • ReadOnly 或 Disabled 时不可打开或修改选项。

行为说明

  • Open 控制下拉面板开关，并触发 OnOpen/OnClose。
  • AllowClear 为真时显示清空按钮并允许清空选中项。
  • Position 控制弹层显示位置。

API

Parameters (参数)

状态 参数名 类型 默认值 描述
Implemented Label string? null 顶部标签文本。
Implemented Placeholder string "请选择..." 无选中项时的占位文案。
Implemented Items IEnumerable<TValue>? null 选项数据源集合（别名）。
Implemented Options IEnumerable<TValue>? null 选项数据源集合。
Implemented Value TValue? default 单选模式下的值（支持 @bind-Value）。
Implemented SelectedOption TValue? default 单选模式下选中项（别名）。
Implemented SelectedValues IEnumerable<TValue>? null 多选模式下选中值集合。
Implemented Multiple bool false 是否开启多选模式。
Implemented AllowClear bool true 是否允许清空选中值。
Implemented LabelSelector Func<TValue, string>? null 选项文本选择器。
Implemented OptionText Func<TValue, string>? null 选项文本选择器（别名）。
Implemented Appearance SxInputAppearance Outline 视觉风格。
Implemented Compact bool false 紧凑样式。
Implemented Borderless bool false 无边框样式。
Implemented Autofocus bool false 自动聚焦。
Implemented AriaLabel string? null aria-label。
Implemented Open bool false 控制下拉面板打开/关闭。
Implemented Position SelectPosition Below 弹层位置。
Implemented ReadOnly bool false 是否只读。
Implemented Required bool false 是否必填。
Implemented Height string? null 弹层最大高度。
Implemented Width string? null 组件宽度。
Implemented EmptyTemplate RenderFragment? null 空状态模板。
Implemented LoadingTemplate RenderFragment? null 加载状态模板。
Implemented OptionTemplate RenderFragment<TValue>? null 选项模板。
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 OptionValue Func<TValue, string>? null 提取选项值的方法。
Not Implemented ValueExpression Expression<Func<TValue>>? null 数据绑定验证表达式。

Events (事件)

状态 事件名 类型 描述
Implemented OnOpen EventCallback 打开时触发。
Implemented OnClose EventCallback 关闭时触发。
Implemented OpenChanged EventCallback<bool> 打开状态变化时触发。
Implemented SelectedOptionChanged EventCallback<TValue?> 单选模式下选中项改变时触发。
Implemented SelectedValuesChanged EventCallback<IEnumerable<TValue>?> 多选模式下选中值集合改变时触发。
Implemented ValueChanged EventCallback<TValue?> 值改变时触发（支持 @bind-Value）。

Methods (方法)

状态 方法名 返回值 描述
Implemented FocusAsync ValueTask 使组件获得焦点。
Implemented DisposeAsync ValueTask 异步释放资源。

示例

<SxSelect TValue="string" Items="_cities" Label="选择城市" @bind-Value="_selectedCity" />

<SxSelect TValue="string" Items="_roles" Multiple="true" @bind-SelectedValues="_selectedRoles" />

<SxSelect TValue="User" Items="_users" LabelSelector="@(u => u.FullName)" />

参考设计 (References)

在 Playground 中打开 →