Steps 步骤条

引导用户按照流程完成任务的导航条。

何时使用#

当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。

API#

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

Steps#

整体步骤条。

参数	说明	类型	可选值	默认值
current	可选参数，指定当前处理正在执行状态的步骤，从0开始记数。在子Step元素中，可以通过status属性覆盖状态。	number	无	0
size	可选参数，指定大小（目前只支持普通和迷你两种大小）。	string	small, default	default
direction	可选参数，指定步骤条方向（目前支持水平和竖直两种方向，默认水平方向）。	string	vertical	无
maxDescriptionWidth	可选参数，指定步骤的详细描述文字的最大宽度。	number	无	100

Steps.Step#

步骤条内的每一个步。

参数	说明	类型	可选值	默认值
status	可选参数，指定状态。当不配置该属性时，会使用父Steps元素的current来自动指定状态。	string	wait, process, finish	wait
title	必要参数，标题。	string/jsx	无	无
description	可选参数，步骤的详情描述。	string/jsx	无	空
icon	可选参数，步骤的Icon。如果不指定，则使用默认的样式。	string/jsx	无	空

代码演示

import { Steps } from 'antd';
const Step = Steps.Step;
const container = document.getElementById('components-steps-demo-simple');

const steps = [{
  title: '已完成',
  description: '这里是多信息的描述啊'
}, {
  title: '进行中',
  description: '这里是多信息的耶哦耶哦哦耶哦耶'
}, {
  title: '又一个待运行',
  description: '描述啊描述啊'
}, {
  title: '待运行',
  description: '这里是多信息的描述啊'
}].map(function(s, i) {
  return (
    <Step key={i} title={s.title} description={s.description} />
  );
});

ReactDOM.render(<Steps current={1}>{steps}</Steps>, container);

基本用法

简单的步骤条。

import { Steps } from 'antd';
const Step = Steps.Step;
const container = document.getElementById('components-steps-demo-small-size');

const steps = [{
  status: 'finish',
  title: '已完成'
}, {
  status: 'process',
  title: '进行中'
}, {
  status: 'wait',
  title: '待运行'
}, {
  status: 'wait',
  title: '待运行'
}].map(function(s, i) {
  return (
    <Step key={i} title={s.title} description={s.description} />
  );
});

ReactDOM.render(<Steps size="small" current={1}>{steps}</Steps>, container);

迷你版

迷你版的步骤条，通过设置 <Steps size="small"> 启用.

import { Steps } from 'antd';
const Step = Steps.Step;
const container = document.getElementById('components-steps-demo-icon');

ReactDOM.render(<Steps>
  <Step status="finish" title="步骤1" icon="cloud" />
  <Step status="process" title="步骤2" icon="apple" />
  <Step status="wait" title="步骤3" icon="github" />
</Steps>, container);

带ICON图标的步骤条

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

#components-steps-demo-step-next > div > div {
  margin-bottom: 30px;
}

import { Steps, Button } from 'antd';
const Step = Steps.Step;
const container = document.getElementById('components-steps-demo-step-next');
const array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3));
const steps = array.map(function(item, i) {
  return {
    title: '步骤' + (i + 1)
  };
});

const App = React.createClass({
  getInitialState() {
    return {
      currentStep: Math.floor(Math.random() * steps.length)
    };
  },
  next() {
    let s = this.state.currentStep + 1;
    if (s === steps.length) {
      s = 0;
    }
    this.setState({
      currentStep: s
    });
  },
  render() {
    const cs = this.state.currentStep;
    return (
      <div>
        <div>当前正在执行第 {cs + 1} 步</div>
        <Steps current={cs}>
          {steps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)}
        </Steps>
        <div>
          <Button onClick={this.next}>下一步</Button>
        </div>
      </div>
    );
  }
});

ReactDOM.render(<App />, container);

切换到下一步

随机生成 3~6 个步骤，初始随机进行到其中一个步骤。

import { Steps } from 'antd';
const Step = Steps.Step;
const container = document.getElementById('components-steps-demo-vertical');

const steps = [{
  title: '已完成',
  description: '这里是信息的描述'
}, {
  title: '进行中',
  description: '这里是信息的描述'
}, {
  title: '待运行',
  description: '这里是信息的描述'
}, {
  title: '又一个待运行',
  description: '这里是信息的描述'
}].map(function(s, i) {
  return (
    <Step key={i} title={s.title} description={s.description} />
  );
});

ReactDOM.render(<Steps direction="vertical" current={1}>{steps}</Steps>, container);

竖直方向的步骤条

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

import { Steps } from 'antd';
const Step = Steps.Step;
const container = document.getElementById('components-steps-demo-vertical-small');

const steps = [{
  title: '已完成',
  description: '这里是信息的描述'
}, {
  title: '进行中',
  description: '这里是信息的描述'
}, {
  title: '待运行',
  description: '这里是信息的描述'
}].map(function(s, i) {
  return (
    <Step key={i} title={s.title} description={s.description} />
  );
});

ReactDOM.render(<Steps size="small" direction="vertical" current={1}>{steps}</Steps>, container);

竖直方向的小型步骤条

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

import { Steps } from 'antd';
const Step = Steps.Step;
const container = document.getElementById('components-steps-demo-status');

const steps = [{
  status: 'finish',
  title: '已完成',
  description: '这里是多信息的描述啊'
}, {
  status: 'process',
  title: '进行中',
  description: '这里是多信息的耶哦耶哦哦耶哦耶'
}, {
  status: 'wait',
  title: '又一个待运行',
  description: '描述啊描述啊'
}, {
  status: 'wait',
  title: '待运行',
  description: '这里是多信息的描述啊'
}].map(function(s, i) {
  return (
    <Step key={i} title={s.title} status={s.status} description={s.description} />
  );
});

ReactDOM.render(<Steps>{steps}</Steps>, container);

自定义状态

可以使用 status 定义每个步骤的状态。