Vuetify — Visibility and Layout

Image for post
Image for post
Photo by Alex Machado 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.

Visibility

Vuetify provides us with some visibility classes.

They include:

  • Hidden on all .d-none

Display in Print

Vuetify also provides classes for display stuff in print. They are:

  • .d-print-none

Elevation Helpers

We can change the depth of an element with the elevation helpers.

For example, we can write:

<template>
<v-container>
<v-row class="text-center">
<v-col cols="12">
<v-card :elevation="10" height="100" width="100">
<v-row class="fill-height" align="center" justify="center" v-text="'foo'"></v-row>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>

We have the v-card component with the elevation prop to set the elevation.

Now we’ll see a shadow in an element.

Flexbox

Vuetify supports flexbox for layout.

To use it, we can use the classes that it provides.

For example, we can write:

<template>
<v-container>
<v-row class="text-center">
<v-col cols="12">
<v-card class="d-flex pa-2" outlined tile>
<div>flexbox</div>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>

We added the v-card with the d-flex class to make the card have a flex layout.

Flexbox classes include:

  • .d-flex

Flex Direction

We can change the flex-direction with the provides classes.

For example, we can write:

<template>
<v-container>
<v-row class="text-center">
<v-col cols="12">
<v-card class="d-flex flex-row mb-6" color="grey lighten-2" flat tile>
<v-card v-for="n in 3" :key="n" class="pa-2" outlined tile>item {{ n }}</v-card>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>

We have the flex-row class to show the divs in a row.

Vuetify also provides the flex-column-reverse classes to change the orientation of the flexbox container.

Image for post
Image for post
Photo by Mahir Uysal on Unsplash

Conclusion

We can change the visibility and layout of elements with Vuetify.

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