步骤条 Steps - Ant Design

Finished

This is a description.

2

In Progress

Left 00:00:08

This is a description.

3

Waiting

This is a description.

基本用法

简单的步骤条。

TypeScript
JavaScript
import React from 'react';
import { Steps } from 'antd';

const description = 'This is a description.';
const App: React.FC = () => (
  <Steps
    current={1}
    items={[
      {
        title: 'Finished',
        description,
      },
      {
        title: 'In Progress',
        description,
        subTitle: 'Left 00:00:08',
      },
      {
        title: 'Waiting',
        description,
      },
    ]}
  />
);

export default App;

Finished

2

In Progress

3

Waiting

迷你版

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

TypeScript
JavaScript
import React from 'react';
import { Steps } from 'antd';

const App: React.FC = () => (
  <Steps
    size="small"
    current={1}
    items={[
      {
        title: 'Finished',
      },
      {
        title: 'In Progress',
      },
      {
        title: 'Waiting',
      },
    ]}
  />
);

export default App;

Login

Verification

Pay

Done

带图标的步骤条

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

TypeScript
JavaScript
import React from 'react';
import { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } from '@ant-design/icons';
import { Steps } from 'antd';

const App: React.FC = () => (
  <Steps
    items={[
      {
        title: 'Login',
        status: 'finish',
        icon: <UserOutlined />,
      },
      {
        title: 'Verification',
        status: 'finish',
        icon: <SolutionOutlined />,
      },
      {
        title: 'Pay',
        status: 'process',
        icon: <LoadingOutlined />,
      },
      {
        title: 'Done',
        status: 'wait',
        icon: <SmileOutlined />,
      },
    ]}
  />
);

export default App;

1

First

2

Second

3

Last

First-content

步骤切换

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

TypeScript
JavaScript
import React, { useState } from 'react';
import { Button, message, Steps, theme } from 'antd';

const steps = [
  {
    title: 'First',
    content: 'First-content',
  },
  {
    title: 'Second',
    content: 'Second-content',
  },
  {
    title: 'Last',
    content: 'Last-content',
  },
];

const App: React.FC = () => {
  const { token } = theme.useToken();
  const [current, setCurrent] = useState(0);

  const next = () => {
    setCurrent(current + 1);
  };

  const prev = () => {
    setCurrent(current - 1);
  };

  const items = steps.map((item) => ({ key: item.title, title: item.title }));

  const contentStyle: React.CSSProperties = {
    lineHeight: '260px',
    textAlign: 'center',
    color: token.colorTextTertiary,
    backgroundColor: token.colorFillAlter,
    borderRadius: token.borderRadiusLG,
    border: `1px dashed ${token.colorBorder}`,
    marginTop: 16,
  };

  return (
    <>
      <Steps current={current} items={items} />
      <div style={contentStyle}>{steps[current].content}</div>
      <div style={{ marginTop: 24 }}>
        {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>
    </>
  );
};

export default App;

Finished

This is a description.

2

In Progress

This is a description.

3

Waiting

This is a description.

竖直方向的步骤条

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

TypeScript
JavaScript
import React from 'react';
import { Steps } from 'antd';

const description = 'This is a description.';
const App: React.FC = () => (
  <Steps
    direction="vertical"
    current={1}
    items={[
      {
        title: 'Finished',
        description,
      },
      {
        title: 'In Progress',
        description,
      },
      {
        title: 'Waiting',
        description,
      },
    ]}
  />
);

export default App;

Finished

This is a description.

2

In Progress

This is a description.

3

Waiting

This is a description.

竖直方向的小型步骤条

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

TypeScript
JavaScript
import React from 'react';
import { Steps } from 'antd';

const description = 'This is a description.';
const App: React.FC = () => (
  <Steps
    direction="vertical"
    size="small"
    current={1}
    items={[
      { title: 'Finished', description },
      {
        title: 'In Progress',
        description,
      },
      {
        title: 'Waiting',
        description,
      },
    ]}
  />
);

export default App;

Finished

This is a description

In Process

This is a description

3

Waiting

This is a description

步骤运行错误

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

TypeScript
JavaScript
import React from 'react';
import { Steps } from 'antd';

const description = 'This is a description';
const App: React.FC = () => (
  <Steps
    current={1}
    status="error"
    items={[
      {
        title: 'Finished',
        description,
      },
      {
        title: 'In Process',
        description,
      },
      {
        title: 'Waiting',
        description,
      },
    ]}
  />
);

export default App;

Finished

This is a description.

In Progress

This is a description.

Waiting

This is a description.

Finished

This is a description. This is a description.

Finished

This is a description. This is a description.

In Progress

This is a description. This is a description.

Waiting

This is a description.

Waiting

This is a description.

点状步骤条

包含步骤点的进度条。

TypeScript
JavaScript
import React from 'react';
import { Divider, Steps } from 'antd';

const App: React.FC = () => (
  <>
    <Steps
      progressDot
      current={1}
      items={[
        {
          title: 'Finished',
          description: 'This is a description.',
        },
        {
          title: 'In Progress',
          description: 'This is a description.',
        },
        {
          title: 'Waiting',
          description: 'This is a description.',
        },
      ]}
    />
    <Divider />
    <Steps
      progressDot
      current={1}
      direction="vertical"
      items={[
        {
          title: 'Finished',
          description: 'This is a description. This is a description.',
        },
        {
          title: 'Finished',
          description: 'This is a description. This is a description.',
        },
        {
          title: 'In Progress',
          description: 'This is a description. This is a description.',
        },
        {
          title: 'Waiting',
          description: 'This is a description.',
        },
        {
          title: 'Waiting',
          description: 'This is a description.',
        },
      ]}
    />
  </>
);

export default App;

Finished

You can hover on the dot.

In Progress

You can hover on the dot.

Waiting

You can hover on the dot.

Waiting

You can hover on the dot.

自定义点状步骤条

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

TypeScript
JavaScript
import React from 'react';
import type { StepsProps } from 'antd';
import { Popover, Steps } from 'antd';

const customDot: StepsProps['progressDot'] = (dot, { status, index }) => (
  <Popover
    content={
      <span>
        step {index} status: {status}
      </span>
    }
  >
    {dot}
  </Popover>
);
const description = 'You can hover on the dot.';
const App: React.FC = () => (
  <Steps
    current={1}
    progressDot={customDot}
    items={[
      {
        title: 'Finished',
        description,
      },
      {
        title: 'In Progress',
        description,
      },
      {
        title: 'Waiting',
        description,
      },
      {
        title: 'Waiting',
        description,
      },
    ]}
  />
);

export default App;

1

Step 1

This is a description.

2

Step 2

This is a description.

3

Step 3

This is a description.

1

Step 1

This is a description.

2

Step 2

This is a description.

3

Step 3

This is a description.

可点击

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

TypeScript
JavaScript
import React, { useState } from 'react';
import { Divider, Steps } from 'antd';

const App: React.FC = () => {
  const [current, setCurrent] = useState(0);

  const onChange = (value: number) => {
    console.log('onChange:', value);
    setCurrent(value);
  };
  const description = 'This is a description.';

  return (
    <>
      <Steps
        current={current}
        onChange={onChange}
        items={[
          {
            title: 'Step 1',
            description,
          },
          {
            title: 'Step 2',
            description,
          },
          {
            title: 'Step 3',
            description,
          },
        ]}
      />

      <Divider />

      <Steps
        current={current}
        onChange={onChange}
        direction="vertical"
        items={[
          {
            title: 'Step 1',
            description,
          },
          {
            title: 'Step 2',
            description,
          },
          {
            title: 'Step 3',
            description,
          },
        ]}
      />
    </>
  );
};

export default App;

导航步骤

导航类型的步骤条。

TypeScript
JavaScript
import React, { useState } from 'react';
import { Steps } from 'antd';

const App: React.FC = () => {
  const [current, setCurrent] = useState(0);

  const onChange = (value: number) => {
    console.log('onChange:', value);
    setCurrent(value);
  };

  return (
    <>
      <Steps
        type="navigation"
        size="small"
        current={current}
        onChange={onChange}
        className="site-navigation-steps"
        items={[
          {
            title: 'Step 1',
            subTitle: '00:00:05',
            status: 'finish',
            description: 'This is a description.',
          },
          {
            title: 'Step 2',
            subTitle: '00:01:02',
            status: 'process',
            description: 'This is a description.',
          },
          {
            title: 'Step 3',
            subTitle: 'waiting for longlong time',
            status: 'wait',
            description: 'This is a description.',
          },
        ]}
      />
      <Steps
        type="navigation"
        current={current}
        onChange={onChange}
        className="site-navigation-steps"
        items={[
          {
            status: 'finish',
            title: 'Step 1',
          },
          {
            status: 'process',
            title: 'Step 2',
          },
          {
            status: 'wait',
            title: 'Step 3',
          },
          {
            status: 'wait',
            title: 'Step 4',
          },
        ]}
      />
      <Steps
        type="navigation"
        size="small"
        current={current}
        onChange={onChange}
        className="site-navigation-steps"
        items={[
          {
            status: 'finish',
            title: 'finish 1',
          },
          {
            status: 'finish',
            title: 'finish 2',
          },
          {
            status: 'process',
            title: 'current process',
          },
          {
            status: 'wait',
            title: 'wait',
            disabled: true,
          },
        ]}
      />
    </>
  );
};

export default App;

Finished

This is a description.

2

In Progress

Left 00:00:08

This is a description.

3

Waiting

This is a description.

带有进度的步骤

带有进度的步骤。

TypeScript
JavaScript
import React from 'react';
import { Steps } from 'antd';

const description = 'This is a description.';
const App: React.FC = () => (
  <Steps
    current={1}
    percent={60}
    items={[
      {
        title: 'Finished',
        description,
      },
      {
        title: 'In Progress',
        subTitle: 'Left 00:00:08',
        description,
      },
      {
        title: 'Waiting',
        description,
      },
    ]}
  />
);

export default App;

Finished

This is a description.

2

In Progress

This is a description.

3

Waiting

This is a description.

Finished

This is a description.

2

In Progress

This is a description.

3

Waiting

This is a description.

Finished

This is a description.

2

In Progress

This is a description.

3

Waiting

This is a description.

标签放置位置

修改标签放置位置为 vertical。

TypeScript
JavaScript
import React from 'react';
import { Steps } from 'antd';

const description = 'This is a description.';
const items = [
  {
    title: 'Finished',
    description,
  },
  {
    title: 'In Progress',
    description,
  },
  {
    title: 'Waiting',
    description,
  },
];
const App: React.FC = () => (
  <>
    <Steps current={1} labelPlacement="vertical" items={items} />
    <br />
    <Steps current={1} percent={60} labelPlacement="vertical" items={items} />
    <br />
    <Steps current={1} size="small" labelPlacement="vertical" items={items} />
  </>
);

export default App;

Ant Design Title 1
Ant Design, a design language for background applications, is refined by Ant UED Team
Step 1
This is a Step 1.
Step 2
This is a Step 2.
Step 3
This is a Step 3.
Ant Design Title 2
Ant Design, a design language for background applications, is refined by Ant UED Team
Step 1
This is a Step 1.
Step 2
This is a Step 2.
Step 3
This is a Step 3.
Ant Design Title 3
Ant Design, a design language for background applications, is refined by Ant UED Team
Step 1
This is a Step 1.
Step 2
This is a Step 2.
Step 3
This is a Step 3.
Ant Design Title 4
Ant Design, a design language for background applications, is refined by Ant UED Team
Step 1
This is a Step 1.
Step 2
This is a Step 2.
Step 3
This is a Step 3.

内联步骤

内联类型的步骤条，适用于列表内容场景中展示对象所在流程、当前状态的情况。

TypeScript
JavaScript
import type { StepsProps } from 'antd';
import { Avatar, List, Steps } from 'antd';
import React from 'react';

const data = [
  {
    title: 'Ant Design Title 1',
    current: 0,
  },
  {
    title: 'Ant Design Title 2',
    current: 1,
    status: 'error',
  },
  {
    title: 'Ant Design Title 3',
    current: 2,
  },
  {
    title: 'Ant Design Title 4',
    current: 1,
  },
];

const items = [
  {
    title: 'Step 1',
    description: 'This is a Step 1.',
  },
  {
    title: 'Step 2',
    description: 'This is a Step 2.',
  },
  {
    title: 'Step 3',
    description: 'This is a Step 3.',
  },
];

const App: React.FC = () => (
  <div>
    <List
      itemLayout="horizontal"
      dataSource={data}
      renderItem={(item, index) => (
        <List.Item>
          <List.Item.Meta
            avatar={<Avatar src={`https://joesch.moe/api/v1/random?key=${index}`} />}
            title={<a href="https://ant.design">{item.title}</a>}
            description="Ant Design, a design language for background applications, is refined by Ant UED Team"
          />
          <Steps
            style={{ marginTop: 8 }}
            type="inline"
            current={item.current}
            status={item.status as StepsProps['status']}
            items={items}
          />
        </List.Item>
      )}
    />
  </div>
);

export default App;

参数	说明	类型	默认值	版本
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` `inline`	string	`default`	inline: 5.0
onChange	点击切换步骤时触发	(current) => void	-
items	配置选项卡内容	StepItem	[]	4.24.0

参数	说明	类型	默认值	版本
className	步骤条类名	string	-
current	指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态	number	0
initial	起始序号，从 0 开始记数	number	0
status	指定当前步骤的状态，可选 `wait` `process` `finish` `error`	string	`process`
onChange	点击切换步骤时触发	(current) => void	-
items	配置选项卡内容，不支持 `icon` `subtitle`	StepItem	[]	4.24.0

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

Ant Design

Steps步骤条

何时使用

代码演示

Ant Design Title 1

Ant Design Title 2

Ant Design Title 3

Ant Design Title 4

API

Steps

`type="inline"`

StepItem