Steps步骤条

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

基本用法

简单的步骤条。

迷你版的步骤条，通过设置 启用.

import { Steps } from 'antd';
const Step = Steps.Step;
ReactDOM.render(
  <Steps size="small" current={1}>
    <Step title="Finished" />
    <Step title="In Progress" />
    <Step title="Waiting" />
  </Steps>,
  mountNode,
);

带图标的步骤条

import { Steps, Icon } from 'antd';
const Step = Steps.Step;
ReactDOM.render(
  <Steps>
    <Step status="finish" title="Login" icon={<Icon type="user" />} />
    <Step status="finish" title="Verification" icon={<Icon type="solution" />} />
    <Step status="process" title="Pay" icon={<Icon type="loading" />} />
    <Step status="wait" title="Done" icon={<Icon type="smile-o" />} />
  mountNode,
);

通常配合内容及按钮使用，表示一个流程的处理进度。

.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  text-align: center;
  padding-top: 80px;
}
.steps-action {
  margin-top: 24px;
}

竖直方向的步骤条

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

import { Steps } from 'antd';
const Step = Steps.Step;
ReactDOM.render(
  <Steps direction="vertical" current={1}>
    <Step title="Finished" description="This is a description." />
    <Step title="In Progress" description="This is a description." />
    <Step title="Waiting" description="This is a description." />
  </Steps>,
  mountNode,
);

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

步骤运行错误

使用 Steps 的 status 属性来指定当前步骤的状态。

const Step = Steps.Step;
ReactDOM.render(
  <Steps current={1} status="error">
    <Step title="Finished" description="This is a description" />
    <Step title="In Process" description="This is a description" />
    <Step title="Waiting" description="This is a description" />
  </Steps>,
  mountNode,
);

包含步骤点的进度条。

const Step = Steps.Step;
ReactDOM.render(
  <Steps progressDot current={1}>
    <Step title="Finished" description="This is a description." />
    <Step title="In Progress" description="This is a description." />
    <Step title="Waiting" description="This is a description." />
  </Steps>,
  mountNode,
);

自定义点状步骤条

为点状步骤条增加自定义展示。

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

整体步骤条。

Steps.Step