Steps 步骤条

规则

• 应用在离散和时间较长的进度显示，eg：转账进度；如果任务是连续和短暂的，应该使用 Progress 来显示，eg：打开页面。

• 当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务，eg：用户注册新账号。

代码演示

步骤条

/* eslint global-require: 0 */
import { Steps, WingBlank, WhiteSpace, Icon } from 'antd-mobile';
const Step = Steps.Step;
ReactDOM.render(
  <WingBlank size="lg">
    <div className="sub-title">Small size</div>
    <WhiteSpace />
    <Steps size="small" current={1}>
      <Step title="Finished" description="This is description" />
      <Step title="In Progress" description="This is description" />
      <Step title="Waiting" description="This is description" />
    </Steps>
    <div className="sub-title">Small size, single line text</div>
    <WhiteSpace />
    <Steps size="small" current={1}>
      <Step title="Finished" />
      <Step title="In Progress" />
      <Step title="Waiting" />
    </Steps>
    <div className="sub-title">Default size</div>
    <WhiteSpace size="lg" />
    <Steps>
      <Step status="process" title="Finished" description="This is description" />
      <Step status="error" title="Error" description="This is description" />
      <Step title="Waiting" description="This is description" />
    </Steps>
    <div className="sub-title">Customized status </div>
    <WhiteSpace size="lg" />
    <Steps>
      <Step status="finish" title="Step 1" icon={<Icon type={require('./pay-circle.svg')} />} />
      <Step status="process" title="Step 2" icon={<Icon type={require('./pay-circle.svg')} />} />
      <Step status="error" title="Step 3" icon={<Icon type={require('./pay-circle.svg')} />} />
    </Steps>
    <div className="sub-title">Customized icon </div>
    <WhiteSpace size="lg" />
    <Steps current={1}>
      <Step title="Step 1" icon={<Icon type={require('./pay-circle.svg')} />} description="This is description" />
      <Step title="Step 2" icon={<Icon type={require('./pay-circle.svg')} />} description="This is description" />
      <Step title="Step 3" icon={<Icon type={require('./pay-circle.svg')} />} description="This is description" />
    </Steps>
    <div className="sub-title">Multiple steps </div>
    <WhiteSpace size="lg" />
    <Steps current={1}>
      <Step title="Step 1" icon={<Icon type={require('./pay-circle.svg')} />} />
      <Step title="Step 2" icon={<Icon type={require('./pay-circle.svg')} />} />
      <Step title="Step 3" status="error" icon={<Icon type={require('./pay-circle.svg')} />} />
      <Step title="Step 4" icon={<Icon type={require('./pay-circle.svg')} />} />
    </Steps>
  </WingBlank>
  , mountNode);

.sub-title {
  color: #888;
  font-size: .28rem;
  padding: 30px 0 18px 0;
}

水平方向的步骤条

/* eslint global-require: 0 */
import { Steps, WingBlank, WhiteSpace, Icon } from 'antd-mobile';
const Step = Steps.Step;
const steps = [{
  title: 'Finished',
  description: 'This is description',
}, {
  title: 'In Progress',
  description: 'This is description',
}, {
  title: 'Waiting',
  description: 'This is description',
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
ReactDOM.render(
  <WingBlank mode={20} className="stepsExample">
    <div className="sub-title">Horizontal small size</div>
    <WhiteSpace />
    <Steps current={1} direction="horizontal" size="small">{steps}</Steps>
    <div className="sub-title">Horizontal default size</div>
    <WhiteSpace />
    <Steps current={1} direction="horizontal">{steps}</Steps>
    <div className="sub-title">Horizontal customized icon</div>
    <WhiteSpace />
    <Steps direction="horizontal">
      <Step title="Step 1" icon={<Icon type={require('./pay-circle.svg')} />} />
      <Step status="error" title="Step 2" icon={<Icon type={require('./pay-circle.svg')} />} />
      <Step title="Step 3" icon={<Icon type={require('./pay-circle.svg')} />} />
    </Steps>
    <div className="sub-title">Horizontal timeline mode</div>
    <WhiteSpace />
    <Steps current={-1} direction="horizontal" size="small" className="timeline">
      <Step title="Now" description="Buy" icon={<span className="fake-icon" />} />
      <Step title="Nov. 3rd" description="Buy success" icon={<span className="fake-icon" />} />
      <Step title="Nov. 4th" description="Profit arrival" icon={<span className="fake-icon" />} />
    </Steps>
  </WingBlank>
  , mountNode);

.stepsExample .timeline.am-steps.am-steps-small
.am-steps-item.am-steps-custom
.am-steps-head-inner > .am-steps-icon {
  width: 0.16rem;
  height: 0.16rem;
  border-radius: 50%;
  background-color: #d9dff1;
}
.stepsExample .timeline.am-steps.am-steps-small .am-steps-tail {
  top: 0.06rem;
  padding: 0 0.16rem;
  background-color: transparent;
}
.sub-title {
  color: #888;
  font-size: .28rem;
  padding: 30px 0 18px 0;
}

API

<Steps>
  <Step title="第一步" />
  <Step title="第二步" />
  <Step title="第三步" />
</Steps>

Steps

Steps.Step