Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Stepper Header Options
We can change the stepper header to different styles.
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-stepper v-model="step" ref="stepper" color="primary" animated>
<q-step
:name="1"
:error="step < 3"
title="Step 1"
icon="settings"
:done="step > 1"
>
step 1
</q-step>
<q-step
:name="2"
title="Step 2"
caption="Optional"
icon="create_new_folder"
:done="step > 2"
>
step 2
</q-step>
<q-step :name="3" title="Step 3" icon="assignment" disable>
This step won't show up because it is disabled.
</q-step>
<q-step :name="4" title="Step 4" icon="add_comment">
step 4
</q-step>
<template v-slot:navigation>
<q-stepper-navigation>
<q-btn
@click="$refs.stepper.next()"
color="primary"
:label="step === 4 ? 'Finish' : 'Continue'"
>
</q-btn>
<q-btn
v-if="step > 1"
flat
color="primary"
@click="$refs.stepper.previous()"
label="Back"
class="q-ml-sm"
>
</q-btn>
</q-stepper-navigation>
</template>
</q-stepper>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
step: 1
}
});
</script>
</body>
</html>
to add the error prop into the q-step component.
The error prop lets us set the condition for when to display an error icon and red text.
We can also change the label style to display with the icon stacked above the label text with the alternative-labels prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-stepper
alternative-labels
v-model="step"
ref="stepper"
color="primary"
animated
>
<q-step :name="1" title="Step 1" icon="settings" :done="step > 1">
step 1
</q-step>
<q-step
:name="2"
title="Step 2"
icon="create_new_folder"
:done="step > 2"
>
step 2
</q-step>
<q-step :name="3" title="Step 3" icon="assignment" disable>
This step won't show up because it is disabled.
</q-step>
<q-step :name="4" title="Step 4" icon="add_comment">
step 4
</q-step>
<template v-slot:navigation>
<q-stepper-navigation>
<q-btn
@click="$refs.stepper.next()"
color="primary"
:label="step === 4 ? 'Finish' : 'Continue'"
>
</q-btn>
<q-btn
v-if="step > 1"
flat
color="primary"
@click="$refs.stepper.previous()"
label="Back"
class="q-ml-sm"
>
</q-btn>
</q-stepper-navigation>
</template>
</q-stepper>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
step: 1
}
});
</script>
</body>
</html>
We can also change the color of the icon with the inactive-color , active-color and done-color props to change the label colors at those states:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-stepper v-model="step" ref="stepper" color="primary" animated>
<q-step
done-color="deep-orange"
active-color="purple"
inactive-color="secondary"
:name="1"
title="Step 1"
icon="settings"
:done="step > 1"
>
step 1
</q-step>
<q-step
:name="2"
title="Step 2"
icon="create_new_folder"
:done="step > 2"
>
step 2
</q-step>
<q-step :name="3" title="Step 3" icon="assignment" disable>
This step won't show up because it is disabled.
</q-step>
<q-step :name="4" title="Step 4" icon="add_comment">
step 4
</q-step>
<template v-slot:navigation>
<q-stepper-navigation>
<q-btn
@click="$refs.stepper.next()"
color="primary"
:label="step === 4 ? 'Finish' : 'Continue'"
>
</q-btn>
<q-btn
v-if="step > 1"
flat
color="primary"
@click="$refs.stepper.previous()"
label="Back"
class="q-ml-sm"
>
</q-btn>
</q-stepper-navigation>
</template>
</q-stepper>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
step: 1
}
});
</script>
</body>
</html>
Conclusion
We can add the stepper with various options with Quasar’s q-stepper component.