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 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.Stepicon 属性,可以启用自定义图标。

#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);

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