Steps步骤条

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

何时使用

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

代码演示

Steps步骤条 - 图1

基本用法

简单的步骤条。

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

Steps步骤条 - 图2

迷你版

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

  1. import { Steps } from 'antd';
  2. const { Step } = Steps;
  3. ReactDOM.render(
  4. <Steps size="small" current={1}>
  5. <Step title="Finished" />
  6. <Step title="In Progress" />
  7. <Step title="Waiting" />
  8. </Steps>,
  9. mountNode,
  10. );

Steps步骤条 - 图3

带图标的步骤条

通过设置 Steps.Stepicon 属性,可以启用自定义图标。

  1. import { Steps } from 'antd';
  2. import { UserOutlined, SolutionOutlined, LoadingOutlined, SmileOutlined } from '@ant-design/icons';
  3. const { Step } = Steps;
  4. ReactDOM.render(
  5. <Steps>
  6. <Step status="finish" title="Login" icon={<UserOutlined />} />
  7. <Step status="finish" title="Verification" icon={<SolutionOutlined />} />
  8. <Step status="process" title="Pay" icon={<LoadingOutlined />} />
  9. <Step status="wait" title="Done" icon={<SmileOutlined />} />
  10. </Steps>,
  11. mountNode,
  12. );

Steps步骤条 - 图4

步骤切换

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

  1. import { Steps, Button, message } from 'antd';
  2. const { Step } = Steps;
  3. const steps = [
  4. {
  5. title: 'First',
  6. content: 'First-content',
  7. },
  8. {
  9. title: 'Second',
  10. content: 'Second-content',
  11. },
  12. {
  13. title: 'Last',
  14. content: 'Last-content',
  15. },
  16. ];
  17. const App = () => {
  18. const [current, setCurrent] = React.useState(0);
  19. const next = () => {
  20. setCurrent(current + 1);
  21. };
  22. const prev = () => {
  23. setCurrent(current - 1);
  24. };
  25. return (
  26. <>
  27. <Steps current={current}>
  28. {steps.map(item => (
  29. <Step key={item.title} title={item.title} />
  30. ))}
  31. </Steps>
  32. <div className="steps-content">{steps[current].content}</div>
  33. <div className="steps-action">
  34. {current < steps.length - 1 && (
  35. <Button type="primary" onClick={() => next()}>
  36. Next
  37. </Button>
  38. )}
  39. {current === steps.length - 1 && (
  40. <Button type="primary" onClick={() => message.success('Processing complete!')}>
  41. Done
  42. </Button>
  43. )}
  44. {current > 0 && (
  45. <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
  46. Previous
  47. </Button>
  48. )}
  49. </div>
  50. </>
  51. );
  52. };
  53. ReactDOM.render(<App />, mountNode);
  1. .steps-content {
  2. min-height: 200px;
  3. margin-top: 16px;
  4. padding-top: 80px;
  5. text-align: center;
  6. background-color: #fafafa;
  7. border: 1px dashed #e9e9e9;
  8. border-radius: 2px;
  9. }
  10. .steps-action {
  11. margin-top: 24px;
  12. }

Steps步骤条 - 图5

竖直方向的步骤条

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

  1. import { Steps } from 'antd';
  2. const { Step } = Steps;
  3. ReactDOM.render(
  4. <Steps direction="vertical" current={1}>
  5. <Step title="Finished" description="This is a description." />
  6. <Step title="In Progress" description="This is a description." />
  7. <Step title="Waiting" description="This is a description." />
  8. </Steps>,
  9. mountNode,
  10. );

Steps步骤条 - 图6

竖直方向的小型步骤条

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

  1. import { Steps } from 'antd';
  2. const { Step } = Steps;
  3. ReactDOM.render(
  4. <Steps direction="vertical" size="small" current={1}>
  5. <Step title="Finished" description="This is a description." />
  6. <Step title="In Progress" description="This is a description." />
  7. <Step title="Waiting" description="This is a description." />
  8. </Steps>,
  9. mountNode,
  10. );

Steps步骤条 - 图7

步骤运行错误

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

  1. import { Steps } from 'antd';
  2. const { Step } = Steps;
  3. ReactDOM.render(
  4. <Steps current={1} status="error">
  5. <Step title="Finished" description="This is a description" />
  6. <Step title="In Process" description="This is a description" />
  7. <Step title="Waiting" description="This is a description" />
  8. </Steps>,
  9. mountNode,
  10. );

Steps步骤条 - 图8

点状步骤条

包含步骤点的进度条。

  1. import { Steps, Divider } from 'antd';
  2. const { Step } = Steps;
  3. ReactDOM.render(
  4. <>
  5. <Steps progressDot current={1}>
  6. <Step title="Finished" description="This is a description." />
  7. <Step title="In Progress" description="This is a description." />
  8. <Step title="Waiting" description="This is a description." />
  9. </Steps>
  10. <Divider />
  11. <Steps progressDot current={1} direction="vertical">
  12. <Step title="Finished" description="This is a description. This is a description." />
  13. <Step title="Finished" description="This is a description. This is a description." />
  14. <Step title="In Progress" description="This is a description. This is a description." />
  15. <Step title="Waiting" description="This is a description." />
  16. <Step title="Waiting" description="This is a description." />
  17. </Steps>
  18. </>,
  19. mountNode,
  20. );

Steps步骤条 - 图9

自定义点状步骤条

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

  1. import { Steps, Popover } from 'antd';
  2. const { Step } = Steps;
  3. const customDot = (dot, { status, index }) => (
  4. <Popover
  5. content={
  6. <span>
  7. step {index} status: {status}
  8. </span>
  9. }
  10. >
  11. {dot}
  12. </Popover>
  13. );
  14. ReactDOM.render(
  15. <Steps current={1} progressDot={customDot}>
  16. <Step title="Finished" description="You can hover on the dot." />
  17. <Step title="In Progress" description="You can hover on the dot." />
  18. <Step title="Waiting" description="You can hover on the dot." />
  19. <Step title="Waiting" description="You can hover on the dot." />
  20. </Steps>,
  21. mountNode,
  22. );

Steps步骤条 - 图10

可点击

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

  1. import { Steps, Divider } from 'antd';
  2. const { Step } = Steps;
  3. class Demo extends React.Component {
  4. state = {
  5. current: 0,
  6. };
  7. onChange = current => {
  8. console.log('onChange:', current);
  9. this.setState({ current });
  10. };
  11. render() {
  12. const { current } = this.state;
  13. return (
  14. <>
  15. <Steps current={current} onChange={this.onChange}>
  16. <Step title="Step 1" description="This is a description." />
  17. <Step title="Step 2" description="This is a description." />
  18. <Step title="Step 3" description="This is a description." />
  19. </Steps>
  20. <Divider />
  21. <Steps current={current} onChange={this.onChange} direction="vertical">
  22. <Step title="Step 1" description="This is a description." />
  23. <Step title="Step 2" description="This is a description." />
  24. <Step title="Step 3" description="This is a description." />
  25. </Steps>
  26. </>
  27. );
  28. }
  29. }
  30. ReactDOM.render(<Demo />, mountNode);

Steps步骤条 - 图11

导航步骤

导航类型的步骤条。

  1. import { Steps } from 'antd';
  2. const { Step } = Steps;
  3. class Demo extends React.Component {
  4. state = {
  5. current: 0,
  6. };
  7. onChange = current => {
  8. console.log('onChange:', current);
  9. this.setState({ current });
  10. };
  11. render() {
  12. const { current } = this.state;
  13. return (
  14. <>
  15. <Steps
  16. type="navigation"
  17. size="small"
  18. current={current}
  19. onChange={this.onChange}
  20. className="site-navigation-steps"
  21. >
  22. <Step
  23. title="Step 1"
  24. subTitle="00:00:05"
  25. status="finish"
  26. description="This is a description."
  27. />
  28. <Step
  29. title="Step 2"
  30. subTitle="00:01:02"
  31. status="process"
  32. description="This is a description."
  33. />
  34. <Step
  35. title="Step 3"
  36. subTitle="waiting for longlong time"
  37. status="wait"
  38. description="This is a description."
  39. />
  40. </Steps>
  41. <Steps
  42. type="navigation"
  43. current={current}
  44. onChange={this.onChange}
  45. className="site-navigation-steps"
  46. >
  47. <Step status="finish" title="Step 1" />
  48. <Step status="process" title="Step 2" />
  49. <Step status="wait" title="Step 3" />
  50. <Step status="wait" title="Step 4" />
  51. </Steps>
  52. <Steps
  53. type="navigation"
  54. size="small"
  55. current={current}
  56. onChange={this.onChange}
  57. className="site-navigation-steps"
  58. >
  59. <Step status="finish" title="finish 1" />
  60. <Step status="finish" title="finish 2" />
  61. <Step status="process" title="current process" />
  62. <Step status="wait" title="wait" disabled />
  63. </Steps>
  64. </>
  65. );
  66. }
  67. }
  68. ReactDOM.render(<Demo />, mountNode);
  1. [data-theme='compact'] .site-navigation-steps,
  2. .site-navigation-steps {
  3. margin-bottom: 60px;
  4. box-shadow: 0px -1px 0 0 #e8e8e8 inset;
  5. }

Steps步骤条 - 图12

带有进度的步骤

带有进度的步骤。

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

API

  1. <Steps>
  2. <Step title="第一步" />
  3. <Step title="第二步" />
  4. <Step title="第三步" />
  5. </Steps>

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 时自动变为垂直模式boolean-true
size指定大小,目前支持普通(default)和迷你(smallstringdefault
status指定当前步骤的状态,可选 wait process finish errorstringprocess
type步骤条类型,有 defaultnavigation 两种stringdefault
onChange点击切换步骤时触发(current) => void-

Steps.Step

步骤条内的每一个步骤。

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