ESC
On this page
Components > Stepper
page.vue
1import AppStepper from "@/components/app-components";A stepper component that can be used to show the active step in an app's user interface.
Usage
To use the Stepper component, you need to control its state(activeStep) from a parent component.
YourCustomComp.vue
1<template>
2 <AppStepper :activeStep="activeStep" :stepOptions="stepOptions" />
3</template>
4
5<script lang="tsx" setup>
6import { ref } from "vue";
7const stepOptions: Step[] = [
8 {
9 label: "Step 1",
10 value: "step-1",
11 },
12 {
13 label: "Step 2",
14 value: "step-2",
15 },
16 {
17 label: "Step 3",
18 value: "step-3",
19 },
20];
21const activeStep = ref(stepOptions[0]);
22</script>
23<style>
24</style>