0.0.1 • Published 8 months ago
@licuido-ui/ui_responsive-stepper v0.0.1
Stepper
The Stepper component is a customizable React component that allows you to create a step-by-step user interface for guiding users through a process or workflow. It can be used to represent a multi-step form, a progress tracker, or any scenario where sequential navigation is required.
Author
- @author Vasanth Raj vasantharaja@crayond.co
Link
PlayGround
Installation
npm i @licuido-ui/ui_responsive-stepperImport component
import { Stepper } from '@licuido-ui/ui_responsive-stepper';Usage
<ResponsiveStepper
variant='vertical'
steps={steps}
icons={icons}
activeStep={activeStep}
labelPositionStyle={{ top: 19 }}
/> />Image

Sample Code
<ResponsiveStepper
variant='vertical'
steps={steps}
icons={icons}
activeStep={activeStep}
labelPositionStyle={{ top: 19 }}
/>Props
| Name | Description | Default | Control |
|---|---|---|---|
| variant | string | string | string |
| steps | StepData[] | [] | string[] |
| icons | ReactElement | { } | ReactElement |
| activeStep | number | [] | number |
| activeLineStyle | SxProps | 0 | SxProps |
| className | string | - | string |
| sx | SxProps | - | SxProps |
| completedLineStyle | SxProps | - | SxProps |
| lineStyle | SxProps | - | SxProps |
| labelStyle | SxProps | - | SxProps |
| stepIconStyle | SxProps | - | SxProps |
| activeStepIconStyle | SxProps | - | SxProps |
| completedStepIconStyle | SxProps | - | SxProps |
| connectorOverAllStyle | SxProps | - | SxProps |
0.0.1
8 months ago