UI组件前端【免费下载链接】ant-design-blazorA rich set of enterprise-class UI components based on Ant Design and Blazor.项目地址https://gitcode.com/gh_mirrors/an/ant-design-blazor点击查看免费下载导读在 ant-design-blazor 的 Radio 组件体系中除了手写Radio子项和Options数组两种方式外还提供了一条零配置路径EnumRadioGroupTEnum。你只需要定义一个 C# 枚举类型组件就会在构造时自动遍历枚举成员并生成对应的一组单选框配合System.ComponentModel.DataAnnotations.Display特性还能自定义每个选项的显示文案。本文以仓库 demo enum-group.md 为骨架结合 EnumRadioGroup.cs、EnumHelper.cs 与 RadioGroup.razor.cs 的源码完整讲解它的用法、原理、参数与项目实战场景。一、枚举方式的核心用法原 demo 文档的核心表述只有一句通过指定枚举类型来渲染单选框Render radios by specific enum type。在 ant-design-blazor 中这一能力由泛型组件EnumRadioGroupTEnum提供完整示例见 EnumGroup.razorusing System.ComponentModel.DataAnnotations EnumRadioGroup TEnumFruits bind-Value_radioValue Disabled_disabled Namegroup1/EnumRadioGroup br / EnumRadioGroup TEnumFruits bind-Value_radioValue Disabled_disabled ButtonStyleRadioButtonStyle.Solid Namegroup2/EnumRadioGroup br / Value: _radioValue div stylemargin-top: 20px Button TypeButtonType.Primary OnClick__disabled!_disabledToggle Disabled/Button /div code { Fruits _radioValue Fruits.Apple; bool _disabled; enum Fruits { [Display(Name Apple)] Apple, Pear, Orange } }使用要点可拆解为四步定义枚举类型示例中的Fruits枚举包含Apple、Pear、Orange三个成员其中Apple通过[Display(Name Apple)]指定了自定义显示文本声明组件并指定泛型参数TEnumFruits告诉组件要渲染哪个枚举绑定当前选中值bind-Value_radioValue与Fruits _radioValue Fruits.Apple;双向绑定初始默认选中Apple按需传入其余参数Disabled控制整组禁用、Name设置所有原生input[typeradio]的 name 属性、ButtonStyle切换按钮风格。demo 还搭配了一个Toggle Disabled按钮通过__disabled!_disabled切换整组禁用状态方便直观观察禁用效果。二、为什么枚举方式能自动渲染源码实现原理2.1 EnumRadioGroup 构造函数即渲染EnumRadioGroupTEnum的完整实现非常精简全部逻辑集中在构造函数中public class EnumRadioGroupTEnum : RadioGroupTEnum { public EnumRadioGroup() { Options EnumHelperTEnum.GetValueLabelList() .Select(x new RadioOptionTEnum { Value x.Value, Label x.Label }) .ToArray(); } }从源码结构可以梳理出它的工作流程组件继承自RadioGroupTEnum见 EnumRadioGroup.cs因此天然具备RadioGroup的全部能力与参数构造函数调用EnumHelperTEnum.GetValueLabelList()一次性取出枚举的值 显示名列表将列表映射为RadioOptionTEnum数组并赋给Options属性RadioGroup的渲染模板检测到Options非空后不再渲染ChildContent子内容而是遍历Options逐个生成Radio见 RadioGroup.razor 中Options.IsT1分支foreach (var radio in Options.AsT1) { Radio Valueradio.Value RadioButtonIsButtonradio.Label/Radio }也就是说渲染单选框这件事完全由枚举到Options的自动转换完成用户无需再手写任何Radio子项。2.2 EnumHelper 枚举元数据的提取引擎选项列表的生成依赖EnumHelperTEnum见 EnumHelper.cs。它的静态构造函数会完成一次性初始化static EnumHelper() { _enumType THelper.GetUnderlyingTypeT(); _aggregateFunction BuildAggregateFunction(); _valueList Enum.GetValues(_enumType).CastT(); _valueLabelList _valueList.Select(value (value, EnumHelper.GetDisplayName(_enumType, value))); _isFlags _enumType.GetCustomAttributeFlagsAttribute() ! null; _hasFlagFunction BuildHasFlagFunction(); }EnumRadioGroup用到的关键方法是GetValueLabelList()它返回IEnumerable(T Value, string Label)元组集合Label 的生成规则在内部类EnumHelper.GetDisplayName中定义public static string GetDisplayName(Type enumType, object enumValue) { var enumName Enum.GetName(enumType, enumValue); var fieldInfo enumType.GetField(enumName); return fieldInfo.GetCustomAttributeDisplayAttribute(true)?.GetName() ?? enumName; }由此可以明确两点行为优先取[Display(Name ...)]枚举成员标注了System.ComponentModel.DataAnnotations.Display特性时单选框标签使用特性的Name值示例中即 Apple缺省回退到成员名未标注特性的成员如示例的Pear、Orange直接使用枚举成员名作为标签。顺带说明EnumHelperTEnum还提供GetValueList()、Combine()、Split()、IsFlags等能力前者用于纯值列表后两者面向[Flags]枚举的按位合并与拆分是组件库在表单、级联等场景中复用的通用工具。2.3 RadioGroup 的选项渲染管道Options参数的类型是OneOfstring[], RadioOptionTValue[]见 RadioGroup.razor.cs支持两种形态形态说明渲染方式string[]纯字符串数组每个字符串既作为Value又作为标签如Optionsnew string[]{Apple,Pear}RadioOptionTValue[]值 标签 可选 Disabled结构用radio.Value作为值、radio.Label作为显示文本RadioOptionTValue的定义见 RadioOption.cs包含Label、Value、Disabled三个属性。EnumRadioGroup选择的是第二种形态把枚举值包装成RadioOptionTEnum数组。当Options与ChildContent同时存在时渲染模板优先走Options分支因此EnumRadioGroup内部无需关心子内容渲染。三、关键参数与行为详解由于EnumRadioGroupTEnum直接继承RadioGroupTValue以下参数全部可用参数声明均可在 RadioGroup.razor.cs 中查到参数类型默认值说明TEnum泛型参数-指定要渲染的枚举类型必须有值Value/bind-ValueTEnum-当前选中值双向绑定DefaultValue可单独指定初始值DefaultValueTEnum-默认选中值设置后会同步到CurrentValueDisabledboolfalse禁用整组单选框会联动所有子Radio的禁用状态ButtonStyleRadioButtonStyle?Outline按钮风格Outline描边或Solid填色枚举定义见 ButtonStyle.csNamestring自动生成组内所有input[typeradio]的 name 属性为空时自动用ComponentIdGenerator生成SizeInputSizeDefault大小仅对按钮样式生效OnChangeEventCallbackTEnum-选中值变化后的回调仅在值真正变化时触发两个值得展开的源码行为Disabled 的联动机制RadioGroup.OnInitialized中调用AddRadio注册每个子单选框见 RadioGroup.razor.cs若当前Disabled为 true会通过radio.SetDisabledValue(_disabled)与OnDisabledValueChanged事件同步给所有子项若某个子项自身已禁用则不会被组级状态覆盖。Name 的自动生成当Name未显式指定时OnInitialized会回退到NameAttributeValue ?? PropertyName ?? ComponentIdGenerator.Generate(this)确保同组单选互斥的 name 语义始终成立。OnChange的触发逻辑也值得注意见 RadioGroup.razor.cs内部先比较新旧值仅在EqualsValue(oldValue, CurrentValue)为 false 时才InvokeAsync避免重复回调。四、从值列表到自定义标签与 Options 方式的对照EnumRadioGroup本质上是枚举 → Options的语法糖。如果你不想引入枚举可以手动构造等价的RadioOptionTEnum[]参考同目录下的 Optional.razorRadioOptionstring[] options2 new RadioOptionstring[] { new(){ Value Apple, Label Apple, }, new(){ Value Pear, Label Pear, }, new(){ Value Orange, Label Orange, }, }; RadioGroup Optionsoptions2 bind-Value_radioValue ButtonStyleRadioButtonStyle.Outline/RadioGroup两种方式的差异可以总结为维度EnumRadioGroupTEnumRadioGroupOptions选项来源枚举类型自动提取手动构造数组标签自定义通过[Display(Name)]特性通过RadioOption.Label值类型约束必须是枚举类型TEnum任意TValuestring、int、bool 等均可适用场景选项与业务枚举一一对应、且需要类型安全选项动态变化、来源为数据或配置因此当你的选项集合天然对应一个枚举如状态、类型、方向、对齐方式优先使用EnumRadioGroup既能省去手写RadioOption数组的样板代码又能获得编译期类型安全的bind-Value绑定而选项来自数据库、接口等动态数据时则应使用Options或ChildContent方式。五、项目实战案例用枚举单选框控制 Table 列对齐EnumRadioGroup不仅在 Radio 组件 demo 中出现也被组件库自身的文档站点复用。在 Table 组件的 ColumnAlignment.razor 示例中列对齐方式的选择就是通过枚举单选框实现的pColumn alignment: columnAlign/p EnumRadioGroup TEnumColumnAlign bind-ValuecolumnAlign / code{ ColumnAlign columnAlign ColumnAlign.Left; ... }随后这个columnAlign变量被直接传给多个PropertyColumn的Align属性实现切换对齐方式 → 表格列实时重排的联动效果。这个案例说明了两点EnumRadioGroup适合作为设置面板 / 工具栏中的枚举型选项选择器绑定一个字段即可完成 UI 与状态的同步由于bind-Value的泛型类型就是枚举本身值可以直接参与业务逻辑判断无需再做字符串转换。六、小结EnumRadioGroupTEnum是 ant-design-blazor 中声明式 UI思想的典型体现通过EnumHelperTEnum在构造函数期将枚举元数据值 Display标签转换为RadioOptionTEnum[]再复用RadioGroupTValue完整的Options渲染管道与参数体系Disabled、ButtonStyle、Name、Size、OnChange、双向绑定等让定义一个枚举、渲染一组单选框成为一行代码即可完成的操作。如需进一步探索可以依次阅读组件 demoEnumGroup.razor 与 enum-group.md组件实现EnumRadioGroup.cs、RadioGroup.razor.cs、RadioGroup.razor、RadioOption.cs枚举工具EnumHelper.cs同类组件对比EnumSelectEnumSelect.cs、EnumCheckboxGroupEnumCheckboxGroup.cs在 Select、Checkbox 场景下提供了同样的枚举驱动能力。赞分享UI组件前端【免费下载链接】ant-design-blazorA rich set of enterprise-class UI components based on Ant Design and Blazor.项目地址https://gitcode.com/gh_mirrors/an/ant-design-blazor点击查看免费下载相关推荐ant-design-blazor 使用枚举类型渲染 Checkbox 组EnumCheckboxGroup实战指南ant design blazor 使用枚举类型渲染 Checkbox 组EnumCheckboxGroup实战指南 导读 本文围绕 ant designUI组件前端Ant Design Blazor 中基于枚举类型渲染 Checkbox 组的完整实战指南Ant Design Blazor 中基于枚举类型渲染 Checkbox 组的完整实战指南 导读 在 Ant Design Blazor 组件库中 EnumC前端UI组件设计系统ant-design-blazor 单选框泛型用法完全指南RadioGroup 的 int、string、bool、bool? 值绑定与枚举扩展ant design blazor 单选框泛型用法完全指南RadioGroup 的 int、string、bool、bool? 值绑定与枚举扩展 导读 在 a前端UI组件设计系统上一篇终极指南如何使用Hoppscotch打造无障碍API开发环境下一篇claude-seo 语义主题聚类实战用 SERP 重叠数据驱动 Hub-and-Spoke 内容架构规划创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考