Stepper 步进器

定义／Definition

规则 / Rule

• 步进器是一个两段控件，其中一段默认显示减号，另一端默认显示加号。

• 当想要对数值进行小幅度调整时，可以使用步进器；当用户需要大幅度调整数值的时候，不建议使用步进器

代码演示

基本

import { List, Stepper } from 'antd-mobile';
function onChange(value) {
  console.log('changed', value);
}
ReactDOM.render(
  <div>
    <List>
      <List.Header>表单</List.Header>
      <List.Body>
        <List.Item extra={<Stepper max={10} min={1} defaultValue={3} onChange={onChange} />}>
        默认
        </List.Item>
        <List.Item extra={<Stepper showNumber size="small" max={10} min={1} defaultValue={1} onChange={onChange} />}>
        显示数值
        </List.Item>
        <List.Item extra={<Stepper disabled max={10} min={1} defaultValue={3} onChange={onChange} />}>
        禁用
        </List.Item>
        <List.Item extra={<Stepper disabled max={10} min={1} showNumber defaultValue={3} onChange={onChange} />}>
        禁用
        </List.Item>
      </List.Body>
    </List>
    <List>
      <List.Header>大号</List.Header>
      <List.Body>
        <List.Item>
          <Stepper size="large" max={10} min={1} defaultValue={3} onChange={onChange} />
        </List.Item>
      </List.Body>
    </List>
    <List>
      <List.Header>大号</List.Header>
      <List.Body>
        <List.Item>
          <Stepper size="large" showNumber max={10} min={1} defaultValue={1} onChange={onChange} />
        </List.Item>
      </List.Body>
    </List>
  </div>
, mountNode);

API