Skip to main content

Stepper

The steps is a navigation bar that guides users through the steps of a task.

Usage​

When a given task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.

import React from 'react';
import {  Stepper  } from 'qdm-component-library';

function App() {
     const [step, setstep] = React.useState(0);
     const data = [
        { title: 'Step One' },
        { title: 'Step Two' }, 
        { title: 'Step Three' }, 
        { title: 'Step Four' }
    ]
  return ( 
      <Stepper   
        steps={data} 
        activeStep={step} 
      />
       <Button 
        onClick={() => setstep(step - 1)}
        disabled={step === 0 ? true : false}>
        Previous</Button>
       <Button 
        onClick={() => setstep(step + 1)}
        disabled={steps.length === step + 1 ? true : false}>
        Next</Button>
   );
}
export default App;

Reference​

steps​

The array of stepper data. The element type is array

activeStep​

The number of stepper counts. The element type is number

inLineStyles​

props give addition props to the stepper element type Object

Icon​

You can set any Icon by using this data type.

import React from 'react';
import {  Stepper  } from 'qdm-component-library';

function App() {
     const [step, setstep] = React.useState(0);
     const data = [
        { title: 'Step One' , Icon:"⭐" },
        { title: 'Step Two' , Icon:"🌟"  }, 
        { title: 'Step Three' , Icon:"✨"  }, 
        { title: 'Step Four' , Icon:"✌"  }
    ]
  return ( 
      <Stepper   
        steps={data} 
        activeStep={step} 
      />
       <Button 
        onClick={() => setstep(step - 1)}
        disabled={step === 0 ? true : false}>
        Previous</Button>
       <Button 
        onClick={() => setstep(step + 1)}
        disabled={steps.length === step + 1 ? true : false}>
        Next</Button>
   );
}
export default App;