npm

@s-ui/react-molecule-stepper

2.14.0 • Public • Published

MoleculeStepper

Description Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation. It provides a wizard-like workflow.

Installation

$ npm install @s-ui/react-molecule-stepper

Usage

Basic usage

Import package and use the component

Basic usage:
import MoleculeStepper from 'sui-molecule-stepper'

return (
  <MoleculeStepper
    steps={3}
    step={1}
    icon={<Icon />}
    labels={['step-1', 'step-2', 'step-3']}
    onChange={(event, {step}) => {
      console.log(step)
    }}
  />
)
Compound usage:
import MoleculeStepper, {Step} from 'sui-molecule-stepper'

return (
  <MoleculeStepper steps={3} step={1}>
    {new Array(steps).fill().map((i, index) => (
      <Step
        key={index}
        label={`step-${index}`}
        step={index + 1}
        visited={index < step}
        current={step === index}
        onClick={(event, {step}) => {
          console.log(step)
        }}
      >
        <CustomStep />
      </Step>
    ))}
  </MoleculeStepper>
)

When using the compound usage, the <CustomStep/> child will inherit alignment, design, label, step, steps, current, visited, icon, visitedIcon, currentIcon props to let teh children customize its own behavior.

Import the styles (Sass)

@import '~@s-ui/theme/lib/index';
/* @import 'your theme'; */
@import '~@s-ui/react-molecule-stepper/lib/index';

Find full description and more examples in the demo page.

Dependencies (3)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i @s-ui/react-molecule-stepper

    Weekly Downloads

    2,583

    Version

    2.14.0

    License

    MIT

    Unpacked Size

    29.4 kB

    Total Files

    19

    Last publish

    Collaborators

    • sergi.martinez.adevinta
    • arnau.guell
    • miriam-gil
    • andresin87.adevinta
    • alfredo.narvaez
    • sendami.luque.ext
    • sebastian.badea.adevinta
    • thomas.page.ext
    • victoria.pasichnyk.ext
    • daniel.perez.ext
    • albert.peiro
    • frandelacasa-adevinta
    • mariapaula.forero.ext
    • hpintos_adevinta
    • sziauberyte
    • victor.perez.adevinta
    • oscar-raig-adevinta
    • carlos.gonzalezl
    • carolina.mallo.ext
    • david.nieto
    • ferran.simon
    • sergi.quintela
    • jamile.radloff
    • xavi_ballestar
    • luz_adv
    • ignacio.rodriguez
    • carlosvillu-adevinta
    • diegomr
    • arturo.vicente
    • adria.velardos
    • emiliovz
    • dann41
    • ruben-martin
    • pol.valls
    • cristina.rodriguez.duque
    • sergio.escano
    • marc.benito
    • azahara
    • patricio.sartore
    • giovanny.sayas.ext
    • david.cuadrado.ext
    • alex.castells
    • beatrizip
    • pablo.rey-adevinta
    • sergiocollado
    • cristhianb
    • alisa_bayanova
    • davidmartin2108
    • ferrangbtw
    • estefania_garcia
    • belen.santos
    • alfredo.arronte
    • joanleon-adv
    • luis-garrido
    • aitor.rodriguez
    • jordi.munoz
    • oscar_ramirez
    • ignacio_navarro
    • a.ferrer
    • gfabregoadv
    • izeller
    • salvador.juan
    • ivanmlaborda
    • alejandro.ferrante
    • pa.chruscinski.ext
    • isabelgomez87
    • jenifer.lopez
    • pablogs
    • javier.miguel
    • oscar.gomez
    • marian.lucaci
    • alverd004
    • oriol.puig
    • nacho_torrella
    • xavi.murcia
    • javiauso
    • alfredo.zimperz
    • francisco.ruiz.lloret
    • andresadv
    • schibstedspain