Stepper 步进器

一种两段式控制,增加、减少或修改数值

何时使用

用于在一定范围内输入、调整当前数值

注意事项

  • 输入最大(最小)值无提示,失去焦点后,超过最大(最小)值时系统会自动回显数值为最大值;
  • 当作为表单组件,配合 Form/FormItem 组件使用时,需要设置 mode 的值为 form。

代码示例

基本使用

属性

属性类型必填默认值说明
controlledboolean否false是否受控
valuenumber否-输入框的值, 表单提交的时候有效
type'number' | 'digit'否-输入框唤起键盘类型
minnumber否-最小值
maxnumber否-最大值
stepnumber否1每次加减的值
inputWidthstring否-输入框宽度
precisionnumber否-计算精度,保留几位小数
https://github.com/ant-design/ant-design/issues/5998
autoFocusboolean否false自动聚焦,ios 可能会失效
idstring否-表单元素 id
namestring否-表单元素 name
disabledboolean否false是否禁用
mode'noraml' | 'form'否'normal'配合From/FormItem组件使用时,需设置为 from
classNamestring否-类名

事件

事件名说明类型
onFocus聚焦时,触发此回调( value: number, event: Event) => void
onBlur失去焦点时,触发此回调( value: number, event: Event) => void
onChange数据变化后,触发此回调( value: number, dataSet: Record<string, any> ) => void

样式类

类名说明
amd-stepper整体样式
amd-stepper-disabled禁用状态下的整体样式
amd-stepper-handler+/- 图标区域样式
amd-stepper-handler-up+ 区域样式
amd-stepper-handler-up- 区域样式
amd-stepper-handler-disabled禁用状态下+/- 图标区域样式
amd-stepper-handler-up-inner+/- 图标样式
amd-stepper-input-wrap输入框区域样式
amd-stepper-input输入框样式