Steps步骤条

Steps步骤条

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

何时使用

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

代码演示

简单的步骤条。

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

迷你版

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

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

带图标的步骤条

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

import { Steps } from 'antd';
import { UserOutlined, SolutionOutlined, LoadingOutlined, SmileOutlined } from '@ant-design/icons';
const { Step } = Steps;
ReactDOM.render(
  <Steps>
    <Step status="finish" title="Login" icon={<UserOutlined />} />
    <Step status="finish" title="Verification" icon={<SolutionOutlined />} />
    <Step status="process" title="Pay" icon={<LoadingOutlined />} />
    <Step status="wait" title="Done" icon={<SmileOutlined />} />
  </Steps>,
  mountNode,
);

步骤切换

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

import { Steps, Button, message } from 'antd';
const { Step } = Steps;
const steps = [
  {
    title: 'First',
    content: 'First-content',
  },
  {
    title: 'Second',
    content: 'Second-content',
  },
  {
    title: 'Last',
    content: 'Last-content',
  },
];
const App = () => {
  const [current, setCurrent] = React.useState(0);
  const next = () => {
    setCurrent(current + 1);
  };
  const prev = () => {
    setCurrent(current - 1);
  };
  return (
    <>
      <Steps current={current}>
        {steps.map(item => (
          <Step key={item.title} title={item.title} />
        ))}
      </Steps>
      <div className="steps-content">{steps[current].content}</div>
      <div className="steps-action">
        {current < steps.length - 1 && (
          <Button type="primary" onClick={() => next()}>
            Next
          </Button>
        )}
        {current === steps.length - 1 && (
          <Button type="primary" onClick={() => message.success('Processing complete!')}>
            Done
          </Button>
        )}
        {current > 0 && (
          <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
            Previous
          </Button>
        )}
      </div>
    </>
  );
};
ReactDOM.render(<App />, mountNode);

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

竖直方向的步骤条

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

import { Steps } from 'antd';
const { Step } = Steps;
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,
);

竖直方向的小型步骤条

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

import { Steps } from 'antd';
const { Step } = Steps;
ReactDOM.render(
  <Steps direction="vertical" size="small" 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 属性来指定当前步骤的状态。

import { Steps } from 'antd';
const { Step } = Steps;
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,
);

点状步骤条

包含步骤点的进度条。

import { Steps, Divider } from 'antd';
const { Step } = Steps;
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>
    <Divider />
    <Steps progressDot current={1} direction="vertical">
      <Step title="Finished" description="This is a description. This is a description." />
      <Step title="Finished" description="This is a description. This is a description." />
      <Step title="In Progress" description="This is a description. This is a description." />
      <Step title="Waiting" description="This is a description." />
      <Step title="Waiting" description="This is a description." />
    </Steps>
  </>,
  mountNode,
);

自定义点状步骤条

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

import { Steps, Popover } from 'antd';
const { Step } = Steps;
const customDot = (dot, { status, index }) => (
  <Popover
    content={
      <span>
        step {index} status: {status}
      </span>
    }
  >
    {dot}
  </Popover>
);
ReactDOM.render(
  <Steps current={1} progressDot={customDot}>
    <Step title="Finished" description="You can hover on the dot." />
    <Step title="In Progress" description="You can hover on the dot." />
    <Step title="Waiting" description="You can hover on the dot." />
    <Step title="Waiting" description="You can hover on the dot." />
  </Steps>,
  mountNode,
);

可点击

设置 onChange 后，Steps 变为可点击状态。

import { Steps, Divider } from 'antd';
const { Step } = Steps;
class Demo extends React.Component {
  state = {
    current: 0,
  };
  onChange = current => {
    console.log('onChange:', current);
    this.setState({ current });
  };
  render() {
    const { current } = this.state;
    return (
      <>
        <Steps current={current} onChange={this.onChange}>
          <Step title="Step 1" description="This is a description." />
          <Step title="Step 2" description="This is a description." />
          <Step title="Step 3" description="This is a description." />
        </Steps>
        <Divider />
        <Steps current={current} onChange={this.onChange} direction="vertical">
          <Step title="Step 1" description="This is a description." />
          <Step title="Step 2" description="This is a description." />
          <Step title="Step 3" description="This is a description." />
        </Steps>
      </>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

导航步骤

导航类型的步骤条。

import { Steps } from 'antd';
const { Step } = Steps;
class Demo extends React.Component {
  state = {
    current: 0,
  };
  onChange = current => {
    console.log('onChange:', current);
    this.setState({ current });
  };
  render() {
    const { current } = this.state;
    return (
      <>
        <Steps
          type="navigation"
          size="small"
          current={current}
          onChange={this.onChange}
          className="site-navigation-steps"
        >
          <Step
            title="Step 1"
            subTitle="00:00:05"
            status="finish"
            description="This is a description."
          />
          <Step
            title="Step 2"
            subTitle="00:01:02"
            status="process"
            description="This is a description."
          />
          <Step
            title="Step 3"
            subTitle="waiting for longlong time"
            status="wait"
            description="This is a description."
          />
        </Steps>
        <Steps
          type="navigation"
          current={current}
          onChange={this.onChange}
          className="site-navigation-steps"
        >
          <Step status="finish" title="Step 1" />
          <Step status="process" title="Step 2" />
          <Step status="wait" title="Step 3" />
          <Step status="wait" title="Step 4" />
        </Steps>
        <Steps
          type="navigation"
          size="small"
          current={current}
          onChange={this.onChange}
          className="site-navigation-steps"
        >
          <Step status="finish" title="finish 1" />
          <Step status="finish" title="finish 2" />
          <Step status="process" title="current process" />
          <Step status="wait" title="wait" disabled />
        </Steps>
      </>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

[data-theme='compact'] .site-navigation-steps,
.site-navigation-steps {
  margin-bottom: 60px;
  box-shadow: 0px -1px 0 0 #e8e8e8 inset;
}

带有进度的步骤

带有进度的步骤。

import { Steps } from 'antd';
const { Step } = Steps;
ReactDOM.render(
  <Steps current={1} percent={60}>
    <Step title="Finished" description="This is a description." />
    <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
    <Step title="Waiting" description="This is a description." />
  </Steps>,
  mountNode,
);

API

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

Steps

整体步骤条。

参数	说明	类型	默认值	版本
className	步骤条类名	string	-
current	指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态	number	0
direction	指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向	string	`horizontal`
initial	起始序号，从 0 开始记数	number	0
labelPlacement	指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方	string	`horizontal`
percent	当前 `process` 步骤显示的进度条进度（只对基本类型的 Steps 生效）	number	-	4.5.0
progressDot	点状步骤条，可以设置为一个 function，labelPlacement 将强制为 `vertical`	boolean \| (iconDot, {index, status, title, description}) => ReactNode	false
responsive	当屏幕宽度小于 532px 时自动变为垂直模式	boolean	-	true
size	指定大小，目前支持普通（`default`）和迷你（`small`）	string	`default`
status	指定当前步骤的状态，可选 `wait` `process` `finish` `error`	string	`process`
type	步骤条类型，有 `default` 和 `navigation` 两种	string	`default`
onChange	点击切换步骤时触发	(current) => void	-

Steps.Step

步骤条内的每一个步骤。

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