logo
为了能更好地了解您的商业使用需求,请参与 Ant Design Blazor 商业应用调查,一起建设商业应用社区,为企业系统研发赋能!

Select选择器

Examples

基本使用。

expand code expand code

使用自定义过滤器搜索选项,忽略非空格字符。

expand code expand code

In this demo you can switch between two DataSources. You can Clear a DataSource or set it to NULL. If the DataSource changes, the OnDataSourceChanged event is triggered.

expand code expand code

With the ItemTemplate parameter, it is possible to make visual customizations.

expand code expand code

Entries can be grouped using a group indicator. The parameter GroupName is used for this. It is recommended to sort the entries when using the GroupName parameter (SortByLabel | SortByGroup). Otherwise there may be problems with keyboard navigation.

expand code expand code

Select inside a form component

expand code expand code

As a default behavior, the OnSelectedItemChanged callback can only get the value of the selected item. The LabelInValue property can be used to get the label property of the selected item.

The label of the selected item will be packed as an string (JSON) for passing to the OnSelectedItemChanged callback. This function is only available when the SelectOptions are created without a DataStore.

expand code expand code

试下复制 露西,杰克 到输入框里。只在 tags 和 multiple 模式下可用。

expand code expand code

使用 DropdownRender 对下拉菜单进行自由扩展。

expand code expand code

无边框样式。

expand code expand code

下拉框默认是列表样式,可利用 ListboxStyle 属性自定义样式。

本示例为图标选择器。

expand code expand code

允许自定义选择标签的样式。

当要使用 Enabled/Disabled 状态, 需要通过 LabelTemplateItemLabelTemplateItemContentStyle 属性设置禁用样式。

expand code expand code

MaxTagCount can be either set to literal or changed live.

expand code expand code

Example how to use the PopupContainerSelector.

expand code expand code

由于泛型的写法有点复杂,所以封装了 string 类型的 SimpleSelect。还可以根据需求封装不同类型的 Select 组件。

    public class SimpleSelect : Select<string, string> { }

    public class SimpleSelectOption : SelectOption<string, string> { }
expand code expand code

多选,从已有条目中选择。

expand code expand code

三种大小的选择框,当 size 分别为 largesmall 时,输入框高度为 40px24px ,默认高度为 32px

expand code expand code

tags select,随意输入的内容(scroll the menu)

expand code expand code

When an Item is initialized, the label value (e.g. Lucy), group name, disabled value is set by reflection. To improve the performance and to avoid having to do the reflection again on every render cycle there is the parameter IgnoreItemChanges. The default value for this parameter is True. If you want that the values are updated at runtime set the parameter to False.

expand code expand code

省市联动是典型的例子。

推荐使用 Cascader 组件。

expand code expand code

Show select in modal

expand code expand code

一个带有远程搜索,防抖控制,请求时序控制,加载状态的多选示例。

Currently not implemented.

expand code expand code

隐藏下拉列表中已选择的选项。

expand code expand code

利用自定义下拉模板实现列表选择器。

expand code expand code

当需要展示大量数据时,可以设置 EnableVirtualization=true 启用虚拟化。此功能需要用 .NET 5 以上。

expand code expand code

多选下通过响应式布局让选项自动收缩。该功能对性能有所消耗,不推荐在大表单场景下使用。

expand code expand code

对于枚举类型,可使用更便捷的枚举选择器 EnumSelect

当枚举类型有 FlagsAttribute 特性 时,可使用 @bind-Value 绑定组合值。

expand code expand code

Select API#

属性 描述 类型 默认值
Bordered 属性切换边框样式。 Boolean true
EnableVirtualization 属性Whether to enable virtualization feature or not, only works for .NET 5 and higher Boolean false
DataSource 属性该组件的数据源。 IEnumerable<TItem> --
DataSourceEqualityComparer 属性将在 DataSource 更改检测期间使用的 EqualityComparer。如果没有设置比较器,将使用默认的 .Net。 IEqualityComparer<TItem> --
DefaultActiveFirstOption 属性激活第一个未停用的项目。 Boolean --
DisabledName 属性用作禁用指示器的属性的名称。 String --
DropdownMatchSelectWidth 属性将匹配下拉宽度。如果 true,则匹配下拉列表中最宽项的宽度。如果是 string,匹配字符串值的宽度(例如:250px) OneOf<Boolean, String> true
DropdownMaxWidth 属性不允许下拉宽度超过此处规定的值(例如“768px”) String auto
GroupName 属性用作组指示符的属性的名称。如果设置了该值,条目将按组显示。使用额外的 AntDesign.SelectBase`2.SortByGroupAntDesign.SelectBase`2.SortByLabel String --
IgnoreItemChanges 属性用于提高速度。如果您希望更改标签名称、组名称或禁用指示器,请禁用此属性。 Boolean true
ItemTemplate 属性用于自定义项目样式。 RenderFragment<TItem> --
NotFoundContent 属性指定在没有结果匹配时显示的内容。 RenderFragment --
OnBlur 属性模糊时调用。 Action --
OnCreateCustomTag 属性创建自定义标记时调用。 Action<String> --
OnDataSourceChanged 属性当数据源对象/引用更改时调用。如果数据源中的值发生更改,它不会触发。 Action --
OnDropdownVisibleChange 属性当下拉列表可见性发生变化时调用。 Action<Boolean> --
OnSearch 属性输入更改时触发的回调函数。 Action<String> --
FilterExpression 属性 Func<SelectOptionItem<TItemValue, TItem>, String, Boolean> --
PopupContainerMaxHeight 属性 String --
ShowArrowIcon 属性是否显示下拉箭头 Boolean true
TokenSeparators 属性定义哪些字符将被视为新创建标签的标记分隔符。仅使用键盘创建新标签时很有用。 Char[] --
ValueChanged 属性用于双向绑定。 EventCallback<TItemValue> --
Value 属性获取或设置选定的值。 TItemValue --
LabelProperty 属性指定 option 对象中的 label 属性。如果使用此属性,则不应使用 请改用 ItemLabel

Obsolete 将在未来的版本中删除。
Func<TItem, String> --
ValueProperty 属性指定 option 对象中的 value 属性。如果使用此属性,则不应使用 请改用 ItemValue

Obsolete 将在未来的版本中删除。
Func<TItem, TItemValue> --
DisabledPredicate 属性为禁用的选项指定谓词 Func<TItem, Boolean> --
DefaultValue 属性当 Mode = default 时使用 - 该值在初始化期间和在 Forms 中按下 Reset 按钮时使用。 TItemValue --
ListboxStyle 属性 String --
BoundaryAdjustMode 属性叠加调整策略(例如浏览器调整大小时) TriggerBoundaryAdjustMode --
AllowClear 属性显示清除按钮。如果 AntDesign.AntInputComponentBase`1.Value 类型默认值也在 SelectOption 列表中,则无效,除非与 AntDesign.SelectBase`2.ValueOnClear Boolean --
AutoClearSearchValue 属性选择项目时是否清除当前搜索。 Boolean --
Disabled 属性选择组件是否被禁用。 Boolean --
Mode 属性设置选择模式 - 默认 |多个 |标签 String --
EnableSearch 属性指示搜索功能是否处于活动状态。对于模式标签始终为真。 Boolean --
SearchDebounceMilliseconds 属性延迟搜索输入事件的处理,直到用户停止键入预定的时间。默认为 250 毫秒。 Int32 --
Loading 属性显示加载指示器。您必须自己编写加载逻辑。 Boolean --
Open 属性下拉菜单的受控打开状态。 Boolean --
OpenChanged 属性打开状态更改时调用的回调函数。 EventCallback<Boolean> --
Placeholder 属性选择的占位符。 String --
OnFocus 属性焦点时调用。 EventCallback --
AutoFocus 属性自动对焦。 Boolean --
SortByGroup 属性用作组指示符的属性的名称。如果设置了该值,条目将按组显示。使用额外的 SortByGroup 和 SortByLabel。 SortDirection --
SortByLabel 属性按标签值对项目进行排序。无 |升序 |降序 SortDirection --
HideSelected 属性选中时隐藏选中的项目。 Boolean --
ValuesChanged 属性用于双向绑定。 EventCallback<IEnumerable<TItemValue>> --
SuffixIcon 属性自定义后缀图标。 RenderFragment --
PrefixIcon 属性自定义前缀图标。 RenderFragment --
AccessKey 属性accesskey 全局属性。 String --
DefaultValues 属性Mode = multiple | 时使用tags - 这些值在初始化期间和在 Forms 中按下 Reset 按钮时使用。 IEnumerable<TItemValue> --
OnClearSelected 属性当用户清除选择时调用。 EventCallback --
OnSelectedItemChanged 属性当所选项目更改时调用。 EventCallback<TItem> --
OnSelectedItemsChanged 属性当所选项目更改时调用。 EventCallback<IEnumerable<TItem>> --
Values 属性获取或设置选定的值。 IEnumerable<TItemValue> --
CustomTagLabelToValue 属性将自定义标签(字符串)转换为 TItemValue 类型。 Func<String, TItemValue> --
SelectOptions 属性用于手动呈现选择选项。 RenderFragment --
MaxTagTextLength 属性标签的长度(字符数)。仅适用于 Mode = "multiple" 或 Mode = "tags" Int32 --
LabelInValue 属性是否在值中嵌入标签,将值的格式从 TItemValue 转换为字符串(JSON),例如{ "value": TItemValue, "label": "标签值" } Boolean --
MaxTagCount 属性要显示的最大标签数。响应式会降低渲染性能。 OneOf<Int32, ResponsiveTag> --
ValueOnClear 属性当按下清除按钮时,值将设置为 ValueOnClear 中设置的值 TItemValue --
ItemLabel 属性指定 option 对象中的 label 属性。如果使用此属性,则不应使用 AntDesign.SelectBase'2.LabelName Func<TItem, String> --
ItemValue 属性指定 option 对象中的 value 属性。如果使用此属性,则不应使用 AntDesign.SelectBase'2.ValueName Func<TItem, TItemValue> --
LabelName 属性用于标签的属性的名称。 String --
ValueName 属性要用于该值的属性的名称。 String --
OnMouseEnter 属性鼠标进入时调用。 Action --
OnMouseLeave 属性鼠标离开时调用。 Action --
PopupContainerSelector 属性使用它来修复覆盖问题,例如#区域 String --
DropdownRender 属性自定义下拉内容。上下文是原始内容。 RenderFragment<RenderFragment> --
LabelTemplate 属性用于自定义标签样式。 RenderFragment<TItem> --
MaxTagPlaceholder 属性隐藏标签的占位符。如果与 ResponsiveTag.Responsive 一起使用,请实现您自己的处理逻辑。 RenderFragment<IEnumerable<TItem>> --
ShowSearchIcon 属性是否在单一模式下显示搜索输入。 Boolean --
ValidationMessages FormItem 的验证消息 String[] --
AdditionalAttributes 属性获取或设置将应用于所创建元素的附加属性的集合。 IReadOnlyDictionary<String, Object> --
ValueExpression 属性标识绑定值的表达式。 Expression<Func<TItemValue>> --
ValuesExpression 属性标识可枚举绑定值的表达式。 Expression<Func<IEnumerable<TItemValue>>> --
Size 属性输入框的大小。注意:在表单的上下文中,使用“大”尺寸。可用:`大``默认``小` String AntSizeLDSType.Default
CultureInfo 属性将字符串转换为值和将值转换为字符串时将使用什么文化对 InputNumber 组件有用。 CultureInfo CultureInfo.CurrentCulture
Id 属性组件 HTML 的 ID String Uniquely Generated ID
Class 属性为 DOM 元素指定一个或多个类名。 String --
Style 属性指定 DOM 元素的内联样式。 String --
RefBack 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 ForwardRef --
Rate评分 Slider滑动输入条
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.