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
Quasar comes with the q-stepper component to let us create multi-step content.
For instance, we can use it by writing:
<!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" 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>
The v-model binds to the step number.
We put the q-step components inside the q-stepper to show the step content.
The name prop has the step number which is compared with the step reactive property to determine which step to display.
The title prop is shown in the title bar.
caption is the subtitle of the step.
icon has the icon name.
And done is the condition when the step icon and text highlighted.
The disable prop disables the stepper.
The navigation slot has the content which shows at the bottom of the stepper that lets us navigate the steps.
$ref.stepper.next() moves to the next step and $ref.stepper.previous() moves to the previous step.
We can make the stepper display vertically with the vertical 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
vertical
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"
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>
Conclusion
We can add a stepper component into our Vue app with Quasar’s q-stepper component.
