Stepper

Last modified by Thiago Krieck on 2023/12/05 12:26

Properties

  • Label for each step
  • Active step

Shoelace

Does not have a Stepper component, it should be done with custom element.

vue-dsfr

https://vue-dsfr.netlify.app/?path=/docs/composants-dsfrstepper--docs

<template>
  <DsfrStepper :steps="steps" :currentStep="currentStep" />
</template>

Vuetify

https://vuetifyjs.com/en/components/steppers/

<v-stepper :items="['Step 1', 'Step 2', 'Step 3']">
  <template v-slot:item.1>
    <v-card title="Step One" flat>...</v-card>
  </template>

  <template v-slot:item.2>
    <v-card title="Step Two" flat>...</v-card>
  </template>

  <template v-slot:item.3>
    <v-card title="Step Three" flat>...</v-card>
  </template>
</v-stepper>

Get Connected