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.
$ npm install @s-ui/react-molecule-stepper
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)
}}
/>
)
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 '~@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.