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, Icon } from 'antd';
  2. const { Step } = Steps;
  3. ReactDOM.render(
  4. <Steps>
  5. <Step status="finish" title="Login" icon={<Icon type="user" />} />
  6. <Step status="finish" title="Verification" icon={<Icon type="solution" />} />
  7. <Step status="process" title="Pay" icon={<Icon type="loading" />} />
  8. <Step status="wait" title="Done" icon={<Icon type="smile-o" />} />
  9. </Steps>,
  10. mountNode,
  11. );

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. class App extends React.Component {
  18. constructor(props) {
  19. super(props);
  20. this.state = {
  21. current: 0,
  22. };
  23. }
  24. next() {
  25. const current = this.state.current + 1;
  26. this.setState({ current });
  27. }
  28. prev() {
  29. const current = this.state.current - 1;
  30. this.setState({ current });
  31. }
  32. render() {
  33. const { current } = this.state;
  34. return (
  35. <div>
  36. <Steps current={current}>
  37. {steps.map(item => (
  38. <Step key={item.title} title={item.title} />
  39. ))}
  40. </Steps>
  41. <div className="steps-content">{steps[current].content}</div>
  42. <div className="steps-action">
  43. {current < steps.length - 1 && (
  44. <Button type="primary" onClick={() => this.next()}>
  45. Next
  46. </Button>
  47. )}
  48. {current === steps.length - 1 && (
  49. <Button type="primary" onClick={() => message.success('Processing complete!')}>
  50. Done
  51. </Button>
  52. )}
  53. {current > 0 && (
  54. <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
  55. Previous
  56. </Button>
  57. )}
  58. </div>
  59. </div>
  60. );
  61. }
  62. }
  63. ReactDOM.render(<App />, mountNode);
  1. .steps-content {
  2. margin-top: 16px;
  3. border: 1px dashed #e9e9e9;
  4. border-radius: 6px;
  5. background-color: #fafafa;
  6. min-height: 200px;
  7. text-align: center;
  8. padding-top: 80px;
  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. <div>
  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. </div>,
  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. <div>
  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. </div>
  27. );
  28. }
  29. }
  30. ReactDOM.render(<Demo />, mountNode);

Steps步骤条 - 图11

导航步骤

导航类型的步骤条。

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

API

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

Steps

整体步骤条。

参数说明类型默认值版本
className步骤条类名string-3.11.3
type步骤条类型,有 defaultnavigation 两种stringdefault3.22.0
current指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 status 属性覆盖状态number0
direction指定步骤条方向。目前支持水平(horizontal)和竖直(vertical)两种方向stringhorizontal
labelPlacement指定标签放置位置,默认水平放图标右侧,可选 vertical 放图标下方stringhorizontal3.7.3
progressDot点状步骤条,可以设置为一个 function,labelPlacement 将强制为 verticalBoolean or (iconDot, {index, status, title, description}) => ReactNodefalse
size指定大小,目前支持普通(default)和迷你(smallstringdefault
status指定当前步骤的状态,可选 wait process finish errorstringprocess
initial起始序号,从 0 开始记数number03.9.0
onChange点击切换步骤时触发(current) => void-3.19.0

Steps.Step

步骤条内的每一个步骤。

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