Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Timeline Avatar Dots
The dots on the timeline can be avatars.
For example, we can write:
<template>
<v-timeline>
<v-timeline-item v-for="n in 3" :key="n" large>
<template v-slot:icon>
<v-avatar>
<img src="http://i.pravatar.cc/64" />
</v-avatar>
</template>
<template v-slot:opposite>
<span>Tus eu perfecto</span>
</template>
<v-card class="elevation-2">
<v-card-title class="headline">Lorem ipsum</v-card-title>
<v-card-text>Lorem ipsum dolor sit amet.</v-card-text>
</v-card>
</v-timeline-item>
</v-timeline>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We put the avatar icon in the icon slot to show it.
Colored Dots
The dots can be colored.
To change the color, we set the value for the color prop on the v-timeline-item :
<template>
<v-card class="mx-auto" max-width="400">
<v-card-text class="py-0">
<v-timeline align-top dense>
<v-timeline-item color="pink" small>
<v-row class="pt-1">
<v-col cols="3">
<strong>5pm</strong>
</v-col>
<v-col>
<strong>New Icon</strong>
<div class="caption">Mobile App</div>
</v-col>
</v-row>
</v-timeline-item>
<v-timeline-item color="teal lighten-3" small>
<v-row class="pt-1">
<v-col cols="3">
<strong>3-4pm</strong>
</v-col>
<v-col>
<strong>Meeting</strong>
<div class="caption mb-2">Hangouts</div>
</v-col>
</v-row>
</v-timeline-item>
<v-timeline-item color="pink" small>
<v-row class="pt-1">
<v-col cols="3">
<strong>12pm</strong>
</v-col>
<v-col>
<strong>Lunch break</strong>
</v-col>
</v-row>
</v-timeline-item>
<v-timeline-item color="teal lighten-3" small>
<v-row class="pt-1">
<v-col cols="3">
<strong>9-11am</strong>
</v-col>
<v-col>
<strong>Go Home</strong>
<div class="caption">Web App</div>
</v-col>
</v-row>
</v-timeline-item>
</v-timeline>
</v-card-text>
</v-card>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
Tooltips
We can add tooltips with the v-tooltip component.
For instance, we can write:
<template>
<div class="text-center">
<v-tooltip left>
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">Left</v-btn>
</template>
<span>Left tooltip</span>
</v-tooltip>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
The v-tooltip component has the activator slot to let us place the component for activating the tooltip.
The left prop places the tooltip on the left.
The placement of the toolbar can also be changed with the top , bottom , and right props.
We just pass the on event listeners to the v-on directive and the attrs object to the v-bind directive.
Visibility
We can change the visibility of the tooltip with v-model .
For example, we can write:
<template>
<v-container fluid class="text-center">
<v-row class="flex" justify="space-between">
<v-col cols="12">
<v-btn @click="show = !show">toggle</v-btn>
</v-col>
<v-col cols="12" class="mt-12">
<v-tooltip v-model="show" top>
<template v-slot:activator="{ on, attrs }">
<v-btn icon v-bind="attrs" v-on="on">
<v-icon color="grey lighten-1">mdi-cart</v-icon>
</v-btn>
</template>
<span>Programmatic tooltip</span>
</v-tooltip>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
show: false,
}),
};
</script>
We have a Toggle button to toggle the show prop to toggle the tooltip.
v-model on the v-tooltip controls the tooltip.
Conclusion
We can add avatars and timelines and add tooltips with Vuetify.
