wt-stepper.vue

Specs

Props

Name	Required	Types	Default	Description	Example	Deprecated
steps	✅	Array	-	An array of displayed steps. May include "name", "description", "completed"
activeStep		number	1	All past and active steps are marked with "accent-secondary-color"

Slots

Name	Scope	Description
description
main

Example Stepper

Step 1

Step 2

Step 3

Code

<script setup>
import { ref } from 'vue';

const steps = [{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }];

const active = ref(1);
</script>

<template>
  <wt-stepper :active-step="active" :steps="steps" />

  <wt-button @click="active < 3 ? active++ : (active = 1)">
    Next step
  </wt-button>
</template>