Stepper 步进器

用作增加或者减少当前数值。

规则

  • 当想要对数值进行小幅度调整时,可以使用 Stepper,eg:将年化收益从 4.00% 调整到 4.05%。

代码演示

基本

数字输入框。

  1. import { List, Stepper } from 'antd-mobile';
  2. const Demo = React.createClass({
  3. getInitialState() {
  4. return { val: 3 };
  5. },
  6. onChange(val) {
  7. // console.log(val);
  8. this.setState({ val });
  9. },
  10. render() {
  11. return (
  12. <List renderHeader={() => '演示'}>
  13. <List.Item extra={
  14. <Stepper
  15. style={{ width: '100%', minWidth: '2rem' }}
  16. showNumber max={10} min={1} value={this.state.val} onChange={this.onChange}
  17. />}
  18. >
  19. 显示数值
  20. </List.Item>
  21. <List.Item extra={
  22. <Stepper
  23. style={{ width: '100%', minWidth: '2rem' }}
  24. showNumber max={10} min={1} defaultValue={3} disabled
  25. />}
  26. >
  27. 禁用
  28. </List.Item>
  29. </List>
  30. );
  31. },
  32. });
  33. ReactDOM.render(<Demo />, mountNode);

Stepper步进器 - 图1

API ( 适用平台:WEB、React-Native )

成员说明类型默认值
min最小值Number-Infinity
max最大值NumberInfinity
value当前值Number
step每次改变步数,可以为小数Number or String1
defaultValue初始值Number
onChange变化时回调函数(): void
disabled禁用Booleanfalse
readOnlyinput 只读Booleanfalse
showNumber(web only)是否显示数值,默认不显示Booleanfalse
styles(rn only)react native 组件样式ReactNative StyleSheet-