Steps 步骤条

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

何时使用#

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

API#

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

Steps#

整体步骤条。

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

Steps.Step#

步骤条内的每一个步骤。

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

代码演示

import { Steps } from 'antd';
const Step = Steps.Step;

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

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

基本用法

简单的步骤条。

import { Steps } from 'antd';
const Step = Steps.Step;

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

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

迷你版

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

import { Steps } from 'antd';
const Step = Steps.Step;

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>, mountNode);

带图标的步骤条

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

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

import { Steps, Button } from 'antd';
const Step = Steps.Step;
const array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3));
const steps = array.map((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 />, mountNode);

切换到下一步

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

import { Steps } from 'antd';
const Step = Steps.Step;

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

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

竖直方向的步骤条

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

import { Steps } from 'antd';
const Step = Steps.Step;

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

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

竖直方向的小型步骤条

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