Component for displaying and using stepps in stepper
npm install @equinor/fusion-react-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.
Name | Type | Default | Description
------------------------- | ----------------------------- | ----------------------------- | -----------stepKey | string | / | Step key of step. Used for activeStepKey. requiredtitle | string | / | Title of stepdescription | string | / | Description of stepdisabled | boolean | false | Disable step. Can't be clicked, but can manually navigate to it
``tsx
import { Stepper } from '@equinor/fusion-react-stepper';
Step content 1
Step content 2
Step content 3
`
`tsx
import { Stepper } from '@equinor/fusion-react-stepper';
const [activeStep, setActiveStep] = useState
const onChangeStep = (stepKey: string, allSteps: StepKey[]) => {
console.log('active: ', stepKey, ' keys: ', allSteps)
if (activeStep !== stepKey) {
setActiveStep(String(stepKey));
}
};
return (
Step content 1
Step content 2
Step content 3
);
``