Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Sparklines and Dashboard Card
We can put our sparkline in a card.
For example, we can write:
<template>
<v-card class="mt-4 mx-auto" max-width="400">
<v-sheet
class="v-sheet--offset mx-auto"
color="cyan"
elevation="12"
max-width="calc(100% - 32px)"
>
<v-sparkline :labels="labels" :value="value" color="white" line-width="2" padding="16"></v-sparkline>
</v-sheet>
<v-card-text class="pt-0">
<div class="title font-weight-light mb-2">User Registrations</div>
</v-card-text>
</v-card>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
labels: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"],
value: [0, 2, 5, 9, 5, 10, 3, 5],
}),
};
</script>
We add the v-sheet to act as the container for the v-sparkline .
The v-card-text goes below the sparkline.
The color of the v-sheet is displayed as the background color of the card.
Custom Labels
The labels can be customized by populating the label slot.
For example, we can write:
<template>
<v-card class="mx-auto text-center" color="green" dark max-width="600">
<v-card-text>
<v-sheet color="rgba(0, 0, 0, .12)">
<v-sparkline
:value="value"
color="rgba(255, 255, 255, .7)"
height="100"
padding="24"
stroke-linecap="round"
smooth
>
<template v-slot:label="item">${{ item.value }}</template>
</v-sparkline>
</v-sheet>
</v-card-text>
<v-card-text>
<div class="display-1 font-weight-thin">Sales Last 24h</div>
</v-card-text>
</v-card>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
value: [423, 450, 480, 510, 590, 610, 760],
}),
};
</script>
We populate the label slot with our own content.
The item variable has the entry of the value array.
Steppers
We can display progress through numbered steps with the v-stepper component.
For example, we can write:
<template>
<v-stepper>
<v-stepper-header>
<v-stepper-step complete editable step="1">Select keywords</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step complete step="2">Create ad group</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="3" editable>Create ad</v-stepper-step>
</v-stepper-header>
</v-stepper>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We add the v-stepper component to add the steps for our stepper component.
The v-stepper-step has the steps.
v-divider space the steps out with lines.
Non-Editable Steps
We can make steps non-editable with the complete prop.
For example, we can write:
<template>
<v-stepper value="2">
<v-stepper-header>
<v-stepper-step step="1" complete>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>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
Optional Steps
We can add text to indicate that a step is optional:
<template>
<v-stepper value="2">
<v-stepper-header>
<v-stepper-step step="1" complete>Select keywords</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="2">
Create an ad group
<small>Optional</small>
</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="3">Create an ad</v-stepper-step>
</v-stepper-header>
</v-stepper>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
The small element will be placed below the main text.
Conclusion
We can add sparklines to cards and steppers to display steps.
