Topic: Stepper : non-linear

Renovo free asked 5 years ago


Expected behavior I want to implement a non-linear stepper , like the one for the Jquery Library of MDB

Actual behavior Only see current step with content, when complete expand to the next step and close the previous step

Resources (screenshots, code snippets etc.)


Aliaksandr Andrasiuk staff answered 5 years ago


Hi,

We don't have enough code examples with working steppers in our documentation.

We will add it.

For examples, you can use the next code as an example(note: code can be refactored and improved. It's only an easy example of how it works) :

import React, { Component } from "react";
import { MDBContainer, MDBStepper, MDBStep, MDBIcon } from "mdbreact";

class StepperPage extends Component {
  state = {
    activeStep: 1,
    completed: []
  };

  handleClick = number => {
    const completedCopy = [...this.state.completed];
    completedCopy.push(number - 1);

    this.setState({ activeStep: number, completed: completedCopy });
  };

  render() {
    return (
      <MDBContainer>
        <MDBContainer className="mt-5">
          <hr className="my-5" />
          <h2>Vertical stepper</h2>

          <MDBStepper vertical>
            <MDBStep
              className={`${this.state.activeStep === 1 ? "active" : ""} ${
                this.state.completed.includes(1) ? "completed" : ""
              }`}
            >
              <a href="#!">
                <span className="circle">1</span>
                <span className="label" onClick={() => this.handleClick(1)}>
                  First step
                </span>
              </a>
              {this.state.activeStep === 1 && <p className="step-content">First step</p>}
            </MDBStep>

            <MDBStep
              className={` ${this.state.activeStep === 2 ? "active" : ""}  ${
                this.state.completed.includes(2) ? "completed" : ""
              }`}
            >
              <a href="#!">
                <span className="circle">2</span>
                <span className="label" onClick={() => this.handleClick(2)}>
                  Second step
                </span>
              </a>
              {this.state.activeStep === 2 && (
                <div className="step-content grey lighten-4">
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere
                    iusto quaerat vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum
                    similique. Inventore nostrum ut, nobis porro sapiente.
                  </p>
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo
                    repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur
                    totam, atque odit fugiat.
                  </p>
                  <p>
                    Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores tempore saepe
                    reiciendis, vero quod a dolor corporis natus qui magni quas fuga rem excepturi laboriosam.
                    Quisquam expedita ab fugiat.
                  </p>
                </div>
              )}
            </MDBStep>

            <MDBStep
              className={`warning ${this.state.activeStep === 3 ? "active" : ""}  ${
                this.state.completed.includes(3) ? "completed" : ""
              }`}
            >
              <a href="#!">
                <span className="circle">
                  <MDBIcon icon="exclamation-triangle" />
                </span>
                <span className="label" onClick={() => this.handleClick(3)}>
                  Third step
                </span>
              </a>
              {this.state.activeStep === 3 && <p className="step-content">Third step</p>}
            </MDBStep>

            <MDBStep
              className={`${this.state.activeStep === 4 ? "active" : ""} ${
                this.state.completed.includes(4) ? "completed" : ""
              }`}
            >
              <a href="#!">
                <span className="circle">4</span>
                <span className="label" onClick={() => this.handleClick(4)}>
                  Fourth step
                </span>
              </a>
              {this.state.activeStep === 4 && <p className="step-content">Fourth step</p>}
            </MDBStep>
          </MDBStepper>
        </MDBContainer>
      </MDBContainer>
    );
  }
}

export default StepperPage;

Best regards.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.18.0
  • Device: Mac
  • Browser: Chrome
  • OS: Mac
  • Provided sample code: No
  • Provided link: No
Tags