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

Checkbox多选框

多选框。

何时使用

  • 在一组可选项中进行多项选择时;
  • 单独使用可以表示两种状态之间的切换,和 switch 类似。区别在于切换 switch 会直接触发状态改变,而 checkbox 一般用于状态标记,需要和提交操作配合。

Examples

简单的 checkbox。

expand code expand code

联动 checkbox。

expand code expand code

通过指定枚举类型,来渲染 Checkbox 框。

expand code expand code

Checkbox.Group 内嵌 Checkbox 并与 Grid 组件一起使用,可以实现灵活的布局。

expand code expand code

checkbox 不可用。

expand code expand code

方便的从数组生成 Checkbox 组。

expand code expand code

在实现全选效果时,你可能会用到 indeterminate 属性。

expand code expand code

当同时在 OptionsChildContent 中设置选项时,CheckboxGroup 可以在混合选项模式中使用。 MixedMode 属性用于选择优先渲染的选项。

expand code expand code

Checkbox API#

属性 描述 类型 默认值
ChildContent 属性复选框旁边显示的内容 RenderFragment --
CheckedChange 属性检查状态改变时执行的回调Instead use @bind-Checked or EventCallback CheckedChanged .

Obsolete 将在未来的版本中删除。
EventCallback<Boolean> --
CheckedExpression 属性Currently not implemented

Obsolete 将在未来的版本中删除。
Expression<Func<Boolean>> --
Indeterminate 属性复选框的不确定选中状态 Boolean --
Label 属性复选框标签 String --
AutoFocus 属性是否自动对焦输入 Boolean false
Checked 属性输入是否被选中 Boolean false
OnChange 属性输入改变时执行的回调 EventCallback<Boolean> --
CheckedChanged 属性获取或设置更新绑定检查值的回调。 EventCallback<Boolean> --
Disabled 属性禁用输入 Boolean false
ValidationMessages FormItem 的验证消息 String[] --
AdditionalAttributes 属性获取或设置将应用于所创建元素的附加属性的集合。 IReadOnlyDictionary<String, Object> --
Value 属性获取或设置输入的值。这应该与双向绑定一起使用。 Boolean --
ValueChanged 属性更新绑定值的回调。 EventCallback<Boolean> --
ValueExpression 属性标识绑定值的表达式。 Expression<Func<Boolean>> --
ValuesExpression 属性标识可枚举绑定值的表达式。 Expression<Func<IEnumerable<Boolean>>> --
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 --
Cascader级联选择 DatePicker日期选择框
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.