logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
5.3.2
  • 组件总览
  • 通用
    • Button按钮
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Grid栅格
    • Layout布局
    • Space间距
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tabs标签页
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
  • 其他
    • Affix固钉
    • App包裹组件
    • ConfigProvider全局化配置
    • FloatButton悬浮按钮
    • Watermark水印
何时使用
代码演示
基本用法
迷你版
带图标的步骤条
步骤切换
竖直方向的步骤条
竖直方向的小型步骤条
步骤运行错误
点状步骤条
自定义点状步骤条
可点击
导航步骤
带有进度的步骤
标签放置位置
内联步骤
API
Steps
type="inline"
StepItem

Steps步骤条

Pagination分页AutoComplete自动完成

相关资源

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
ahooks-React Hooks 库
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuqueAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech更多产品

yuque语雀-构建你的数字花园
AntVAntV-数据可视化解决方案
EggEgg-企业级 Node.js 框架
kitchenKitchen-Sketch 工具集
xtech蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

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

何时使用

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

代码演示

Finished
This is a description.
2
In Progress
Left 00:00:08
This is a description.
3
Waiting
This is a description.
基本用法

简单的步骤条。

expand codeexpand code
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"> 启用.

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

expand codeexpand code
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
步骤切换

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

expand codeexpand code
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.
竖直方向的步骤条

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

expand codeexpand code
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.
竖直方向的小型步骤条

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

expand codeexpand code
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 属性来指定当前步骤的状态。

expand codeexpand code
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.
点状步骤条

包含步骤点的进度条。

expand codeexpand code
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.
自定义点状步骤条

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

expand codeexpand code
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 变为可点击状态。

expand codeexpand code
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;
Step 1
00:00:05
This is a description.
2
Step 2
00:01:02
This is a description.
3
Step 3
waiting for longlong time
This is a description.
Step 1
2
Step 2
3
Step 3
4
Step 4
finish 1
finish 2
3
current process
4
wait
导航步骤

导航类型的步骤条。

expand codeexpand code
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.
带有进度的步骤

带有进度的步骤。

expand codeexpand code
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。

expand codeexpand code
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.
内联步骤

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

expand codeexpand code
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;

API

Steps

整体步骤条。

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

type="inline"

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

StepItem

步骤条内的每一个步骤。

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