Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Vertical Steppers
We can make the stepper display vertically.
For example, we can write:
<template>
<v-stepper v-model="step" vertical>
<v-stepper-step :complete="step > 1" step="1">
Select an app
<small>Summarize if needed</small>
</v-stepper-step>
<v-stepper-content step="1">
<v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
<v-btn color="primary" @click="step = 2">Continue</v-btn>
<v-btn text>Cancel</v-btn>
</v-stepper-content>
<v-stepper-step :complete="step > 2" step="2">Configure keywords</v-stepper-step>
<v-stepper-content step="2">
<v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
<v-btn color="primary" @click="step = 3">Continue</v-btn>
<v-btn text>Cancel</v-btn>
</v-stepper-content>
<v-stepper-step :complete="step > 3" step="3">Select ad unit</v-stepper-step>
<v-stepper-content step="3">
<v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
<v-btn color="primary" @click="step = 4">Continue</v-btn>
<v-btn text>Cancel</v-btn>
</v-stepper-content>
</v-stepper>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
step: 1,
}),
};
</script>
The v-stepper-step is added above the v-stepper-content to display the step title above the content.
Linear Steppers
We can make a linear stepper to move users through each step sequentially:
<template>
<div>
<v-stepper>
<v-stepper-header>
<v-stepper-step step="1" complete>Select keywords</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="2" complete>Create an ad group</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="3">Create an ad</v-stepper-step>
</v-stepper-header>
</v-stepper>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We add the complete prop so that users can’t go back to that step.
Non-Linear Steppers
To make steps editable, we can add the editable prop:
<template>
<div>
<v-stepper>
<v-stepper-header>
<v-stepper-step step="1" editable>Select keywords</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="2" editable>Create an ad group</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="3">Create an ad</v-stepper-step>
</v-stepper-header>
</v-stepper>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
The editable prop lets users click on the step.
Alternate Labels
We can place text below the step icon with the alt-labels prop:
<template>
<div>
<v-stepper alt-labels>
<v-stepper-header>
<v-stepper-step step="1">Select keywords</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="2">Create an ad group</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="3">Create an ad</v-stepper-step>
</v-stepper-header>
</v-stepper>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
Multi-line Error State
We can add an error state with the rules prop:
<template>
<div>
<v-stepper alt-labels>
<v-stepper-header>
<v-stepper-step step="1">Select keywords</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="2" :rules="[() => false]">
Create an ad group
<small>Alert message</small>
</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="3">Create an ad</v-stepper-step>
</v-stepper-header>
</v-stepper>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We have the rules prop that has an array of functions that returns false to display an error state.
The step text will be red.
Conclusion
We can configure our stepper to do with rules and various props.
