Steps 步骤条

规则

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

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

代码演示

步骤条

import { Steps, WingBlank, WhiteSpace } from 'antd-mobile';
const Step = Steps.Step;
const Icon = ({ type }) => <span className={`anticon anticon-${type}`} />;
ReactDOM.render(
  <WingBlank size="lg">
    <WhiteSpace size="lg" />
    <Steps size="small" current={1}>
      <Step title="已完成" description="这里是信息的描述" />
      <Step title="进行中" description="这里是信息的描述" />
      <Step title="待运行" description="这里是信息的描述" />
    </Steps>
    <WhiteSpace size="lg" />
    <Steps size="lg">
      <Step status="process" title="进行中" description="这里是信息的描述" />
      <Step status="error" className="aa" title="出错" description="这里是信息的描述" />
      <Step title="待运行" description="这里是信息的描述" />
    </Steps>
    <WhiteSpace size="lg" />
    <Steps>
      <Step status="finish" title="步骤1" icon="pay-circle-o" />
      <Step status="process" title="步骤2" icon="pay-circle" />
      <Step status="error" title="步骤3" icon="pay-circle" />
    </Steps>
    <WhiteSpace size="lg" />
    <Steps current={1}>
      <Step title="步骤1" icon="pay-circle" description="这里是信息的描述" />
      <Step title="步骤2" icon="pay-circle" description="这里是信息的描述" />
      <Step title="步骤3" icon="pay-circle" description="这里是信息的描述" />
    </Steps>
    <WhiteSpace size="lg" />
    <Steps current={1}>
      <Step title="步骤1" icon={<Icon type="pay-circle" />} />
      <Step title="步骤2" icon="pay-circle" />
      <Step title="步骤3" status="error" icon="pay-circle" />
      <Step title="步骤4" icon="pay-circle" />
    </Steps>
  </WingBlank>
, mountNode);

API

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

Steps ( 适用平台：WEB、React-Native )

Steps.Step