Stepper

EStepper can help to streamline complicated procedures. It guides users through a series of processes or forms and allows them to focus more on the material by displaying multi-steps. Demo Here

Import

import EStepper from "@components/Elements/EStepper";
import EStepperItem from "@components/Elements/EStepper/EStepperItem";
import EStepperContent from "@components/Elements/EStepper/EStepperContent";
import EStepperAction from "@components/Elements/EStepper/EStepperAction";

Usage

const StepperExample = () => {
    const [activeStep, setActiveStep] = useState(1);

    const stepHandler = (e) => {
        setActiveStep(2);
    };

    return (
        <EStepper value={activeStep}>
            <EStepperItem step={1}/>
            <EStepperItem step={2}/>
            <EStepperContent step={1}>
                step 1
            </EStepperContent>
            <EStepperContent step={2}>
                step 2
            </EStepperContent>

            {activeStep === 1 &&
                <EStepperAction> {/* optional */}
                    <EBtn onClick={stepHandler}>
                        Next
                    </EBtn>
                </EStepperAction>}
        </EStepper>

    );
};

export default StepperExample;

Props

• For EStepper component, the following props are available:

Prop	Type	Default	Note
value	any	-	Current step state
vertical	Boolean	false	It organizes your stepper vertically.
linear	Boolean	false	Force stepper process to move though a defined path.
fixed	Boolean	false	Forces stepper process linearly though a fixed pattern.
className	String	-	Overrides or extends the component's wrapper styles.
dynamic	Boolean	false	It displays the completed steps dynamically with a tick icon.
color	String	"primary"	The given color is applied to the stepper - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
variant	String	"fill"	The EStepper element can be represented in three ways: fill, alternate and gradient. alternate displays the chip with a light background. gradient displays smooth transitions between light and dark shades of specified color.
square	Boolean	false	Removes rounded corners of the element.
contentWrapperClassName	String	-	Overrides or extends the content's wrapper styles.

• For EStepperItem component, the following props are available:

Prop	Type	Default	Note
info	String	-	Adds an info under the label.
step	Number	-	You can Add your own value. If not, we will default to the index of the child position.
className	String	-	Overrides or extends the component's wrapper styles.
status	String	'none'	Validates the stepper steps and prevents it from moving on to the next step if the returned value is error.
color	String	"primary"	The given color is applied to the stepper - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
icon	Object	-	By using icon prop the EStepperItem element will be visualized with an Icon. More Info about icons here.
variant	String	"fill"	The EStepperItem element can be represented in three ways: fill, alternate and gradient. alternate displays the chip with a light background. gradient displays smooth transitions between light and dark shades of specified color.
square	Boolean	false	Removes rounded corners of the element.

• For EStepperContent component, the following props are available:

Prop	Type	Default	Note
step	Number	-	You can Add your own value. If not, we will default to the index of the child position.
className	String	-	Overrides or extends the component's wrapper styles.

Callback Functions

The EStepper component contains following callback functions.

Function	Description
onChange	Controls the current step. function(event: React.SyntheticEvent, currentStep: Number) => void 👇 • event: The event source of the callback. • currentStep: current step value.

Children

The EStepper component provides a children props that enable you to customize the content.

Children	Description
EStepperItem	Component's items.
EStepperContent	Component's content.
EStepperAction	Component's actions.

The EStepperItem and EStepperContent and EStepperAction components provide a children props that enable you to customize the content.

Children	Description
✔️	Component's content.