Steps 步骤条

显示一个任务的进度；或者引导用户完成某个复杂任务。

规则

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

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

代码演示

页面中的步骤条

页面中简单的竖直方向的步骤条，size=small
  1. import { Steps, WingBlank, WhiteSpace } from 'antd-mobile';const Step = Steps.Step;ReactDOM.render(  <div className="stepsExample">    <WhiteSpace size="lg" />    <WingBlank size="lg">      <Steps size="small" current={3}>        <Step title="已完成" description="这里是信息的描述" />        <Step title="进行中" description="这里是信息的描述" />        <Step title="待运行" description="这里是信息的描述" />      </Steps>    </WingBlank>    <WhiteSpace size="lg" />    <WingBlank size="lg">      <Steps size="small">        <Step status="process" title="已完成" description="这里是信息的描述" />        <Step status="error" title="出错" description="这里是信息的描述" />        <Step title="待运行" description="这里是信息的描述" />      </Steps>    </WingBlank>  </div>, mountNode);

结果页面中的步骤条

结果页中的步骤条，根据业务设定步骤icon. 

  1. import { Steps, WingBlank, WhiteSpace } from 'antd-mobile';
  3. const Step = Steps.Step;
  5. ReactDOM.render(
  6.   <div className="stepsExample">
  7.     <WhiteSpace size="lg" />
  8.     <WingBlank size="lg">
  9.       <Steps>
  10.         <Step status="finish" title="步骤1" icon="pay-circle" />
  11.         <Step status="process" title="步骤2" icon="pay-circle" />
  12.         <Step status="error" title="步骤3" icon="pay-circle" />
  13.       </Steps>
  14.     </WingBlank>
  16.     <WhiteSpace size="lg" />
  17.     <WingBlank size="lg">
  18.       <Steps current={1}>
  19.         <Step title="步骤1" icon="pay-circle" description="这里是信息的描述" />
  20.         <Step title="步骤2" icon="pay-circle" description="这里是信息的描述" />
  21.         <Step title="步骤3" icon="pay-circle" description="这里是信息的描述" />
  22.       </Steps>
  23.     </WingBlank>
  25.     <WhiteSpace size="lg" />
  26.     <WingBlank size="lg">
  27.       <Steps current={1}>
  28.         <Step title="步骤1" icon="pay-circle" />
  29.         <Step title="步骤2" icon="pay-circle" />
  30.         <Step title="步骤3" status="error" icon="pay-circle" />
  31.         <Step title="步骤4" icon="pay-circle" />
  32.       </Steps>
  33.     </WingBlank>
  35.   </div>
  36. , mountNode);

Steps步骤条 - 图1

API

  1. <Steps>
  2.   <Step title="第一步" />
  3.   <Step title="第二步" />
  4.   <Step title="第三步" />
  5. </Steps>

Steps

整体步骤条。
参数说明类型默认值
current指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态number0
size指定大小，目前支持普通（default）、迷你（small）stringdefault

Steps.Step

步骤条内的每一个步骤。
参数说明类型默认值
status指定状态。当不配置该属性时，会使用 Steps 的 current 来自动指定状态。可选：waitprocessfinisherrorstringwait
title标题React.Element-
description步骤的详情描述，可选React.Element-
icon步骤图标，可选string-