2.0.2 • Published 5 months ago
@equinor/fusion-react-stepper v2.0.2
@equinor/fusion-react-stepper
Stepper
Properties/Attributes
for stepper
| Name | Type | Default | Description |
|---|---|---|---|
initialStepKey | string / undefined | / | Sets the initial step key for an uncontrolled stepper component. If undefined the stepper will use the first step as initial step. |
stepKey | string / undefined | / | Used for making the stepper a controlled component. If it is set then it is the property that decides the currentStep and initialStepKey is ignored. |
forceOrder | boolean | false | Can't skip steps. Steps will have specific order. |
verticalSteps | boolean | false | Change stepper layout to vertical. Vertical positioning of steps. |
hideNavButtons | boolean | false | Show/hide next and previous navigation buttons for stepper. |
onChange | (stepKey: string, allSteps: StepKey[]) => void | onChange event for active step. |
for step
| Name | Type | Default | Description |
|---|---|---|---|
stepKey | string | / | Step key of step. Used for activeStepKey. required |
title | string | / | Title of step |
description | string | / | Description of step |
disabled | boolean | false | Disable step. Can't be clicked, but can manually navigate to it |
Example Usage
Uncontrolled usage
import { Stepper } from '@equinor/fusion-react-stepper';
<Stepper initialStepKey="step1" onChange={(e, k) => console.log('active: ', e, ' keys: ', k)} props>
<Step title="Title 1" stepKey="step1" props>
Step content 1
</Step>
<Step title="Title 2" stepKey="step2" props>
Step content 2
</Step>
<Step title="Title 3" stepKey="step3" props>
Step content 3
</Step>
</Stepper>Controlled usage
import { Stepper } from '@equinor/fusion-react-stepper';
const [activeStep, setActiveStep] = useState<string>('step1');
const onChangeStep = (stepKey: string, allSteps: StepKey[]) => {
console.log('active: ', stepKey, ' keys: ', allSteps)
if (activeStep !== stepKey) {
setActiveStep(String(stepKey));
}
};
return (
<Stepper stepKey={activeStep} onChange={onChangeStep} props>
<Step title="Title 1" stepKey="step1" props>
Step content 1
</Step>
<Step title="Title 2" stepKey="step2" props>
Step content 2
</Step>
<Step title="Title 3" stepKey="step3" props>
Step content 3
</Step>
</Stepper>
);