Vuetify — Subheaders and Data Iterators

Image for post
Image for post
Photo by Joshua Sortino on Unsplash

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Subheaders with Social Media

We can add subheaders with social media icons below it.

For example, we can write:

<template>
<v-card flat tile>
<v-container v-for="type in types" :key="type" class="grey lighten-4" fluid>
<v-subheader>{{ type }}</v-subheader>
<v-row>
<v-spacer></v-spacer>
<v-col v-for="card in cards" :key="card" cols="12" sm="6" md="4">
<v-card>
<v-img
:src="`https://picsum.photos/200/300?image=${Math.floor(Math.random()*1000)}`"
height="300px"
>
<span class="headline white--text pl-4 pt-4" v-text="card.title"></span>
</v-img>
<v-card-actions class="white justify-center">
<v-btn
v-for="(social, i) in socials"
:key="i"
:color="social.color"
class="white--text"
fab
icon
small
>
<v-icon>{{ social.icon }}</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</v-card>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
types: ["Places to Be", "Places to See"],
cards: ["Good", "Best", "Finest"],
socials: [
{
icon: "mdi-facebook",
color: "indigo",
},
{
icon: "mdi-linkedin",
color: "cyan darken-1",
},
{
icon: "mdi-instagram",
color: "red lighten-3",
},
],
}),
};
</script>

We have the v-subheader component above the v-row .

The subheader will be aligned with the image grid.

The social media icons are in the v-card-actions component.

Table Data Iterators

We can display table data with the v-data-iteratir component.

For example, we can write:

<template>
<v-container fluid>
<v-data-iterator :items="items" :items-per-page.sync="itemsPerPage" hide-default-footer>
<template v-slot:header>
<v-toolbar class="mb-2" color="indigo darken-5" dark flat>
<v-toolbar-title>This is a header</v-toolbar-title>
</v-toolbar>
</template>
<template v-slot:default="props">
<v-row>
<v-col v-for="item in props.items" :key="item.name" cols="12" sm="6" md="4" lg="3">
<v-card>
<v-card-title class="subheading font-weight-bold">{{ item.name }}</v-card-title>
<v-divider></v-divider><v-list dense>
<v-list-item>
<v-list-item-content>Calories:</v-list-item-content>
<v-list-item-content class="align-end">{{ item.calories }}</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>Fat:</v-list-item-content>
<v-list-item-content class="align-end">{{ item.fat }}</v-list-item-content>
</v-list-item>
</v-list>
</v-card>
</v-col>
</v-row>
</template>
<template v-slot:footer>
<v-toolbar class="mt-2" color="indigo" dark flat>
<v-toolbar-title class="subheading">This is a footer</v-toolbar-title>
</v-toolbar>
</template>
</v-data-iterator>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
itemsPerPage: 4,
items: [
{
name: "Yogurt",
calories: 159,
fat: 6.0,
},
{
name: "Ice cream sandwich",
calories: 237,
fat: 9.0,
},
{
name: "Donuts",
calories: 262,
fat: 16.0,
},
{
name: "Cupcake",
calories: 305,
fat: 3.7,
},
],
}),
};
</script>

to display data in a v-data-iterator component.

The data will be displayed in cards which has a list with the column data.

The list is in the v-list component with the v-list-item and v-list-item-content in the list.

The v-card-title has the card title.

Also, we populated the header and footer slots with the header and footer content.

Conclusion

We can subheaders for various content.

Also, we can use the v-data-iterator component to render an array of data to the screen.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store