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

Usage

<template>
  <EStepper :modelValue="activeStep">
    <template #steps>
      <EStepperItem :step="1"/>
      <EStepperItem :step="2"/>
    </template>
    <template #content>
      <EStepperContent :step="1"> step 1</EStepperContent>
      <EStepperContent :step="2"> step 2</EStepperContent>
    </template>
  </EStepper>
  <EBtn @click="activeStep.value = 2" v-if="activeStep.value === 1">
    Next
  </EBtn>
</template>

<script setup>
  const activeStep = ref(1);
</script>

Props

• For EStepper component, the following props are available:

Prop	Type	Default	Note
modelValue	Number	-	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.
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.
actionClasses	String	-	Overrides or extends the action's styles.
contentWrapperClasses	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	-	Specifies the step for each element.
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	-	Specifies the step for each element.

Emits

The EStepper component contains following emits.

Emit	Description
update:modelValue	Controls the active tab.

Slots

The EStepper component provide following slots that enable you to customize the content.

Slot	Description
steps	The slot used for the EStepperItem element.
content	The slot used for the EStepperContent element.
action	The slot used for the stepper actions.

The EStepperItem and EStepperContent components provide a default slot that enable you to customize the content.

Slot	Description
default	The default Vue slot.