前端UI组件设计系统【免费下载链接】ant-design-blazor基于 Ant Design 与 Blazor 的前端组件库。让开发者解放生产力实现更大价值。项目地址https://gitcode.com/ant-design-blazor/ant-design-blazor点击查看免费下载InputNumber 是 ant-design-blazor 中面向数据录入场景的数字输入组件支持通过鼠标步进按钮或键盘直接输入指定范围内的数值。本文以官方文档为核心结合 InputNumber 源码 与仓库内演示用例系统讲解其支持的数字类型、全部 API 参数、格式化与解析机制、精度控制、多语言适配及无障碍实现帮助你在 Blazor 项目中正确选型并写出可靠的数值录入界面。何时使用当页面需要用户提供标准数值如数量、单价、百分比、排序序号时优先使用 InputNumber 而非普通文本框。它相比 TextBox 的核心差异在于内置最大值 / 最小值约束输入与步进结果都会被自动钳制在[Min, Max]区间内提供鼠标步进按钮与键盘方向键ArrowUp/ArrowDown两种增量操作输入内容会在失焦时被转换为强类型数值并回写到绑定模型天然适合表单提交与数据校验。官方使用场景定位很明确当需要获取标准数值时英文文档。支持的数字类型泛型设计InputNumber 是一个泛型组件InputNumberTValue其类型参数决定了整个组件的运算、解析与展示行为。官方文档明确列出了支持的类型sbyte、byte、short、ushort、int、uint、long、ulong、float、double、decimal同时以上所有类型的 Nullable 版本也完全支持例如ushort?、int?、double?等。这一点在演示用例 Generic.razor 中有完整展示同一个页面可以同时渲染byte、byte?、ushort、ushort?、int、int?、decimal、decimal?、double、double?十种实例。从源码看类型合法性在构造函数中即被强制校验_supportTypes数组InputNumber.razor.cs列出上述 11 种类型若TValue或其 Nullable 底层类型不在此列构造函数会直接抛出NotSupportedException(InputNumber supports only numeric types.)L260-L267从编译期到运行期双重保障类型安全。为什么要区分类型整型sbyte至ulong步进与加减运算通过表达式树以int中间类型计算后再转换回原类型L274-L283避免小整型算术溢出浮点型float、double、decimal自动启用小数模式inputmodedecimal并配备舍入能力_roundFunc支持Precision精度控制Nullable当值为null时点击步进按钮组件会智能地取一个初始值——点击“”取Min未设置 Min 则取 0点击“−”取Max未设置 Max 则取 0逻辑见GetInitialValueL407-L419并有对应测试 InputNumberTests.razor 覆盖四种组合。AntDesign.InputNumber bind-Value_byte / AntDesign.InputNumber bind-Value_intNull / AntDesign.InputNumber bind-Value_dec / AntDesign.InputNumber bind-Value_doubleNull / code { private byte _byte; private int? _intNull; private decimal _dec; private double? _doubleNull; }API 参数详解以下参数表完整继承自官方文档并结合 InputNumber.razor.cs 中的实际声明补充了类型细节与默认行为参数说明类型默认值AutoFocus组件挂载时自动获取焦点boolean-CultureInfo数值与字符串互相转换时使用的语言CultureCultureInfoCultureInfo.CurrentCultureDefaultValue初始值TValue-Disabled禁用输入booleanfalseFormatter指定输入框展示值的格式化函数FuncTValue, string-Format指定输入框展示值的格式值为 C# 格式字符串string-Max最大值TValue各数值类型的最大值见下文Min最小值TValue各数值类型的最小值见下文Parser指定从formatter结果中提取数字的解析函数与formatter搭配使用Funcstring, string-Precision数值与展示的小数位数int0Size输入框高度large/middle/small即InputSize.Large/InputSize.Default/InputSize.SmallInputSize.DefaultStep每次改变步数可以为整数或小数TValue1Value当前值双向绑定目标TValue-ValueChanged值变化时触发的回调EventCallbackTValue-MaxLength输入框最大长度int-Width输入框宽度string-OnChange值变化回调与 ValueChanged 等效的组件级事件EventCallbackTValue-OnFocus获得焦点回调EventCallbackFocusEventArgs-PlaceHolder占位提示文本string-Bordered是否显示边框booleantruePrefix输入框前缀内容文本或 RenderFragmentOneOfstring, RenderFragment-说明API 表中的number、function(...)沿用了 React 版 Ant Design 文档习惯在 ant-design-blazor 中分别对应强类型TValue与 C# 委托/EventCallbackMin/Max若未显式设置构造函数会从_defaultMinimum/_defaultMaximum字典L189-L225按类型填入对应数值类型的最小/最大值如int为int.MinValue/int.MaxValuedouble为±Infinitydecimal为decimal.MinValue/MaxValue保证比较逻辑始终有界。最小可用示例Basic.razor 给出了最基础的双向绑定用法AntDesign.InputNumber bind-ValuemyValue Min1 Max10 DefaultValue3 PlaceHolderplease input something / AntDesign.InputNumber Stylewidth:200px bind-ValuenullableValue Min1 Max10 PlaceHolderplease input something / code { private double myValue { get; set; } private double? nullableValue { get; set; } }注意bind-Value绑定的是强类型属性此处为double/double?而非字符串组件的内部字符串转换对开发者完全透明。步进与键盘交互鼠标步进组件渲染了上下两个步进按钮ant-input-number-handler-up/-down见 InputNumber.razor。其交互特性在源码中有明确实现单击一次IncreaseDown/DecreaseDown立即执行一次步进长按连续步进按下约 600ms 后进入连续增加/减少循环每次间隔 200ms常量_interval 200松开或移出按钮时通过CancellationTokenSource取消L466-L514边界禁用达到Max/Min时对应按钮自动变为ant-input-number-handler-up-disabled禁用态GetIconClassL606-L619同时 CSS 中-handler-up-disabled设置cursor: not-allowedstyle/index.less。键盘操作输入框内按ArrowUp/ArrowDown同样触发步进OnKeyDownL516-L536到达边界时直接忽略按键。底层input元素还带有rolespinbutton、aria-valuemin、aria-valuemax、aria-valuenow等无障碍属性并设置autocompleteoff避免浏览器自动填充干扰。小数步进示例Decimal.razor 展示Step0.1的小数步进AntDesign.InputNumber Step0.1 Min-1 Max5 bind-ValuemyValue / code { private double myValue { get; set; } }值得一提的是Step 的小数位会被自动感知Step的 setter 会依据当前CultureInfo的NumberDecimalSeparator解析出小数位数并存入_decimalPlacesL68-L83进而影响显示格式与舍入测试用例InputNumber_value_display_check_when_step_notation_is_scientificInputNumberTests.razor验证了Step0.00001这类科学计数法步进仍能正确显示为0.00001。格式化与解析Formatter / Parser / Format这是 InputNumber 最灵活的扩展点用于控制“数字如何展示给用户”与“展示文本如何还原为数字”。Formatter Parser 组合FormatterFuncTValue, string把数值渲染为展示字符串例如加货币符号、百分号或千分位ParserFuncstring, string把带装饰的字符串还原为纯数字文本随后交给内部解析逻辑转为数值。两者必须搭配使用否则展示与回写会不对称。Formatter.razor 给出两个经典场景——货币与百分比using System.Text.RegularExpressions AntDesign.InputNumber FormatterFormat1 ParserParse1 DefaultValue1000d / AntDesign.InputNumber FormatterFormat2 ParserParse2 DefaultValue100d Min0 Max100 / code { private string Format1(double value) $ value.ToString(n0); private string Parse1(string value) Regex.Replace(value, \$\s?|(,*), ); private string Format2(double value) value.ToString() %; private string Parse2(string value) value.Replace(%, ); }解析链路在TryParseValueFromStringL350-L376中先对输入应用Parser再交给按类型生成的_parseFunc完成文化感知的解析。仓库测试InputNumber_formatter_parser_change_valueInputNumberTests.razor验证了在输入$ 10时最终Value等于10。FormatC# 格式字符串Format参数直接传入 C# 标准数字格式字符串由内部FormatterTValue.FormatFormatter.cs基于表达式树调用IFormattable.ToString(format, CultureInfo)实现无需手写委托。例如Formatn2会以两位小数千分位展示。FormatValueAsString中Format的优先级仅次于FormatterL621-L644。失焦时的字符串转换输入过程oninput仅缓存字符串_inputString不立即写回模型当输入框失焦OnBlurAsync时才执行ConvertNumberAsync完成“字符串 → 数值 → 钳制到 [Min, Max] → 舍入 → 写回 CurrentValue”的完整链路L562-L604。输入/-单独字符时会被当作0处理L360-L363空字符串则解析为default(TValue)因此Nullable 类型在输入被清空后 Value 会安全地回到 null。精度控制PrecisionPrecision参数指定数值与展示的小数位数默认0。其实现分为两层数值层仅对浮点类型生效。构造函数为float/double/decimal生成_roundFunc经由InputNumberMath.RoundInputNumberMath.cs在ChangeValueAsync中若Precision 0或步进本身带小数位则按Precision否则按_decimalPlaces舍入后再写回L584-L599展示层FormatValueAsString中当Precision 0或存在步进小数位时使用n 位数的格式串展示L637-L640即自动补足小数位如1显示为1.00。测试InputNumber_value_should_have_precisionInputNumberTests.razor验证了Precision2时输入0.1234会显示并解析为0.12nullable 类型行为一致。AntDesign.InputNumber Precision3 Min-100 Max100 bind-ValuemyValue / code { private float myValue { get; set; } }区域性与多语言CultureInfo数值的解析与展示默认使用CultureInfo.CurrentCulture。不同的 Culture 对小数点、千分位、货币符号的处理各不相同InputNumber 内部所有ToString/TryParse调用都会显式传入当前组件的CultureInfo见_parseFunc、_toStringFunc的构建L312-L333。Culture.razor 演示了为单个组件指定德语文化小数点为,的用法using System.Globalization AntDesign.InputNumber ValueChanged(double val)OnClickChange(val, 1) CultureInfoCI / code { private CultureInfo CI CultureInfo.GetCultureInfo(de-DE); }这里用ValueChangedlambda 形式而非bind-Value展示了回调式用法每次值变化都会触发(double val) OnClickChange(val, i)。尺寸、禁用与无边框尺寸SizeSize对应枚举InputSizeInputSize.csInputSize.Large、InputSize.Default、InputSize.Small分别映射为 CSS 类ant-input-number-lg、默认尺寸、ant-input-number-smL386-L395并在 style/index.less 中通过input-height-lg/input-height-sm调整高度。Size.razor 展示了三种尺寸AntDesign.InputNumber DefaultValue3 SizeInputSize.Large bind-ValuemyValue / AntDesign.InputNumber DefaultValue3 bind-ValuemyValue / AntDesign.InputNumber DefaultValue3 SizeInputSize.Small bind-ValuemyValue /禁用DisabledDisabledtrue时输入框不可编辑、步进按钮隐藏CSS-disabled .ant-input-number-handler-wrap { display: none; }style/index.less并附加ant-input-number-disabled类。Disable.razor 演示了运行时动态切换禁用状态AntDesign.InputNumber DefaultValue3 Disableddisabled bind-ValuemyValue / Button TypeButtonType.Primary OnClick(e) ToggleDisable()Toggle Disabled/Button code { private bool disabled true; private void ToggleDisable() disabled !disabled; }无边框BorderedBorderedfalse移除边框与阴影样式上对应ant-input-number-borderless类。Borderless.razor 给出了在 Toolbar 或紧凑场景中常用的无边框形态AntDesign.InputNumber Min1 Max10 DefaultValue3 Borderedfalse /与其他表单组件的协作InputNumber 继承自AntInputComponentBaseTValueAntInputComponentBase.cs因此天然具备 ant-design-blazor 表单体系的能力表单集成放入Form/FormItem后值变更会触发EditContext.NotifyFieldChanged并驱动数据注解校验L167-L170校验状态反馈当所在FormItem存在校验状态或HasFeedback时组件自动附加ant-input-number-status-xxx与反馈图标并通过_affixWarrperClass切换为带前后缀的 wrapper 结构L378-L395InputNumber.razor 中即根据HasAffixWarrper分支渲染RTL 支持全局RTL模式下自动附加ant-input-number-rtl类L394配合 rtl.less 完成镜像布局。样式定制组件样式位于 components/input-number/style/index.less以 Less 变量驱动。可定制的关键变量包括默认宽度width: 90pxL27、边框色input-border-color、hover 边框input-number-hover-border-color、步进按钮背景与分隔线input-number-handler-bg、input-number-handler-border-color等。如需统一主题化可参考仓库根目录的 ant-design-blazor.less 变量体系进行覆盖。总结InputNumber 的核心能力可归纳为四点强类型泛型支持11 种数值类型 全部 Nullable、双通道步进交互鼠标长按连续步进 键盘方向键、灵活的展示/解析机制Formatter Parser 组合或 C# Format 格式串、文化感知的解析与精度控制CultureInfo Precision。选型建议整型计数场景直接用InputNumberint涉及金额用decimal并配合Precision需要货币/百分比装饰时启用Formatter/Parser多语言站点则务必根据业务区域设置CultureInfo。所有行为均可通过仓库内 演示用例 与 测试套件 快速验证。赞分享前端UI组件设计系统【免费下载链接】ant-design-blazor基于 Ant Design 与 Blazor 的前端组件库。让开发者解放生产力实现更大价值。项目地址https://gitcode.com/ant-design-blazor/ant-design-blazor点击查看免费下载相关推荐Ant Design InputNumber stringMode 实战指南用字符值模式实现高精度小数输入Ant Design InputNumber stringMode 实战指南用字符值模式实现高精度小数输入 stringMode 是 Ant Design I前端UI组件设计系统Aspire 仓库中的 dotnet-devcert 方案为 Linux CI 注入可信 ASP.NET Core HTTPS 开发证书Aspire 仓库中的 dotnet devcert 方案为 Linux CI 注入可信 ASP.NET Core HTTPS 开发证书 在 Aspire 项UI组件前端SMPL-X模型加载实战指南3步跑通三维人体、手部与表情的完整配置SMPL X模型加载实战指南3步跑通三维人体、手部与表情的完整配置 做三维人体重建最让人抓狂的不是算法有多复杂而是卡在第一步—— 模型加载 。你翻遍文档UI组件前端设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考