43 lines
1.2 KiB
Vue
43 lines
1.2 KiB
Vue
<template>
|
|
<div class="w-[900px] mx-auto mt-[100px]">
|
|
<Wizard
|
|
:total-steps="5"
|
|
:current-step="currentStep"
|
|
:step-labels="['Setup', 'Config', 'Review', 'Deploy', 'Done']"
|
|
@step-change="handleLabeledStepChange"
|
|
/>
|
|
<div class="mt-4 flex gap-2">
|
|
<button @click="prevLabeledStep" :disabled="currentStep <= 1" class="btn btn-outline-primary">
|
|
Previous
|
|
</button>
|
|
<button @click="nextLabeledStep" :disabled="currentStep >= 5" class="btn btn-outline-primary">Next</button>
|
|
</div>
|
|
<p class="mt-2 text-sm text-gray-600">
|
|
Current Step: {{ currentStep }} -
|
|
{{ ["Setup", "Config", "Review", "Deploy", "Done"][currentStep - 1] }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
|
|
const currentStep = ref(1);
|
|
|
|
const handleLabeledStepChange = (step: number) => {
|
|
currentStep.value = step;
|
|
};
|
|
|
|
const nextLabeledStep = () => {
|
|
if (currentStep.value < 5) {
|
|
currentStep.value++;
|
|
}
|
|
};
|
|
|
|
const prevLabeledStep = () => {
|
|
if (currentStep.value > 1) {
|
|
currentStep.value--;
|
|
}
|
|
};
|
|
</script>
|