Modulist Vue

Stepper development

The stepper component displays progress through numbered steps.

Example

<v-stepper v-model="step" :steps="steps" />
1
export default {
  data() {
    return { 
      step: 1, 
      steps: [
        { id: 1, title: 'First' }, 
        { id: 2, title: 'Second' }, 
        { id: 3, title: 'Third' },
      ],
    };
  },
};
1
2
3
4
5
6
7
8
9
10
11
12

Props

Name Type Description Default Required
steps Array List of steps None true
value, v-model Number The model that the stepper value syncs to. Can be set initially as a default value. 1 false
manual Boolean If set true then you should manually change steps false false
hideLabel Boolean Hide labels for steps false false
disablePrev Boolean Disabled step back option false false

← Table →