Vuetify — Visibility and Layout

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
  • Hidden only on xs .d-none .d-sm-flex
  • Hidden only on sm .d-sm-none .d-md-flex
  • Hidden only on md .d-md-none .d-lg-flex
  • Hidden only on lg .d-lg-none .d-xl-flex
  • Hidden only on xl .d-xl-none
  • Visible on all `Visible only on xs .d-flex .d-sm-none
  • Visible only on sm .d-none .d-sm-flex .d-md-none
  • Visible only on md .d-none .d-md-flex .d-lg-none
  • Visible only on lg .d-none .d-lg-flex .d-xl-none
  • Visible only on xl .d-none .d-xl-flex

Display in Print

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

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

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
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-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.

Photo by Mahir Uysal on Unsplash

Conclusion

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

Web developer. Subscribe to my email list now at https://thewebdev.info/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