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.
#javascript #web-development #technology #programming
2.55 GEEK