Steps 步骤条

定义／Definition

一种操作步骤的任务引导和进度显示。

规则 / Rule

建议三步以上，五步以内。可提供个性化定制，可用于购买流程等。

代码演示

基本用法

简单的步骤条。 

  1. import { Steps, WingBlank, WhiteSpace } from 'antd-mobile';
  2. const Step = Steps.Step;
  4. const steps = [{
  5.   title: '已完成',
  6. }, {
  7.   title: '进行中',
  8. }, {
  9.   title: '待运行',
  10. }].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
  12. ReactDOM.render(
  13.   <div className="stepsExample">
  14.     <WhiteSpace size={20} />
  15.     <WingBlank size={20}>
  16.       <Steps current={1} size="point">{steps}</Steps>
  17.     </WingBlank>
  18.   </div>
  19. , mountNode);

竖直方向的步骤条

简单的竖直方向的步骤条。 

  1. import { Steps, WingBlank, WhiteSpace } from 'antd-mobile';
  2. const Step = Steps.Step;
  4. const steps = [{
  5.   title: '已完成',
  6.   description: '这里是信息的描述',
  7. }, {
  8.   title: '进行中',
  9.   description: '这里是信息的描述',
  10. }, {
  11.   title: '待运行',
  12.   description: '这里是信息的描述',
  13. }, {
  14.   title: '又一个待运行',
  15.   description: '这里是信息的描述',
  16. }].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
  18. ReactDOM.render(
  19.   <div className="stepsExample">
  20.     <WhiteSpace size={20} />
  21.     <WingBlank size={20}>
  22.       <Steps direction="vertical" current={1}>{steps}</Steps>
  23.     </WingBlank>
  24.   </div>
  25. , mountNode);

带图标的步骤条

通过设置 Steps.Step 的 icon 属性，可以启用自定义图标。 

  1. import { Steps, WingBlank, WhiteSpace } from 'antd-mobile';
  2. const Step = Steps.Step;
  4. ReactDOM.render(
  5.   <div className="stepsExample">
  6.     <WhiteSpace size={20} />
  7.     <WingBlank size={20}>
  8.       <Steps>
  9.         <Step status="finish" title="步骤1" icon="cloud" />
  10.         <Step status="process" title="步骤2" icon="apple" />
  11.         <Step status="wait" title="步骤3" icon="github" />
  12.       </Steps>
  13.     </WingBlank>
  14.   </div>
  15. , mountNode);

点状的步骤条

点状的步骤条。 

  1. import { Steps, WingBlank, WhiteSpace } from 'antd-mobile';
  2. const Step = Steps.Step;
  4. ReactDOM.render(
  5.   <div className="stepsExample">
  6.     <WhiteSpace size={20} />
  7.     <WingBlank size={20}>
  8.       <Steps size="pointer">
  9.         <Step status="finish" title="步骤1" icon="pointer" />
  10.         <Step status="process" title="步骤2" icon="pointer" />
  11.         <Step status="wait" title="步骤3" icon="pointer" />
  12.       </Steps>
  13.     </WingBlank>
  14.   </div>
  15. , mountNode);

Steps步骤条 - 图1

API

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

Steps

整体步骤条。
参数说明类型默认值
current指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态number0
status指定当前步骤的状态，可选 waitprocessfinisherrorstringprocess
size指定大小，目前支持普通（default）、迷你（small）和点状（pointer）stringdefault
direction指定步骤条方向。目前支持水平和竖直（vertical）两种方向，默认水平方向）string-

Steps.Step

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