步进器
是什么
Stepper(步进器)由一个增加按钮、一个减少按钮和一个由按钮控制的数值组成。每次点击增加按钮(或减少按钮)数字增长(或减少)的数量是恒定的。
如何使用
基本属性
min
最小值
max
最大值
step
步长,每次加减的数量
处理递减
handlerMinus方法
获取最小值和步长
获取内部state上的value
判断,value减去步长不能小于最小值
处理递增
handlerPlus方法
获取最大值和步长
获取内部state上的value
判断,value加上步长不能大于最大值
处理input手动输入修改
如果对数值有大幅度调整的需求,可将数字改造成输入框,通过键盘快捷大幅度精确修改
handlerChange方法
将值转换成整数,防止用户乱输入
判断值必须大于零
handlerBlur方法
要注意考虑数值的上限与下限,在到达限制后禁用相关按钮
获取最小值,最大值和input输入的值
默认值
如果Stepper默认值离用户目标的数值越远,需要的点击次数越多。选择一个合理的默认值能帮助用户减少点击次数提升操作效率
详细
https://material.io/guidelines/components/steppers.html
恭喜!签到成功,获得+2积分