element 步骤条

import React from 'react';
import { Stepper, Step, Button } from 'antd';

const { StepLabel } = Step;

class HorizontalStepper extends React.Component {
  state = {
    current: 0,
  };

  next = () => {
    this.setState({ current: this.state.current + 1 });
  };

  prev = () => {
    this.setState({ current: this.state.current - 1 });
  };

  render() {
    const { current } = this.state;
    return (
      <>
        <Stepper activeStep={current}>
          <Step label="Step 1" />
          <Step label="Step 2" />
          <Step label="Step 3" />
        </Stepper>
        <div>
          {current === steps.length ? (
            <div>
              <h1>All steps completed</h1>
            </div>
          ) : (
            <div>
              <h1>{steps[current].title}</h1>
              <div>{steps[current].content}</div>
              <Button disabled={current === 0} onClick={this.prev}>
                Previous
              </Button>
              <Button type="primary" onClick={this.next}>
                Next
              </Button>
            </div>
          )}
        </div>
      </>
    );
  }
}

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

export default HorizontalStepper;