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

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