Stepper 步进器

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

何时使用

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

注意事项

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

代码示例

基本使用

属性

属性类型必填默认值说明
controlledbooleanfalse是否受控
valuenumber-输入框的值, 表单提交的时候有效
type'number' | 'digit'-输入框唤起键盘类型
minnumber-最小值
maxnumber-最大值
stepnumber1每次加减的值
inputWidthstring-输入框宽度
precisionnumber-计算精度,保留几位小数
https://github.com/ant-design/ant-design/issues/5998
autoFocusbooleanfalse自动聚焦,ios 可能会失效
idstring-表单元素 id
namestring-表单元素 name
disabledbooleanfalse是否禁用
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输入框样式