Category: Vuetify

Vuetify is a popular UI framework for Vue apps.

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

Bottom Nav Bar Scroll Threshold

We can set the scroll-threshold of the v-bottom-navigation to show the navbar depending on the threshold.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-card class="overflow-hidden mx-auto" height="200" max-width="500">
          <v-bottom-navigation
            scroll-target="#scroll-area"
            hide-on-scroll
            absolute
            horizontal
            scroll-threshold="500"
          >
            <v-btn text color="deep-purple accent-4">
              <span>History</span>
              <v-icon>mdi-history</v-icon>
            </v-btn>

            <v-btn text color="deep-purple accent-4">
              <span>Favorites</span>
              <v-icon>mdi-heart</v-icon>
            </v-btn>

            <v-btn text color="deep-purple accent-4">
              <span>Map</span>
              <v-icon>mdi-map-marker</v-icon>
            </v-btn>
          </v-bottom-navigation>

          <v-sheet id="scroll-area" class="overflow-y-auto" max-height="600">
            <v-container style="height: 1500px;"></v-container>
          </v-sheet>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    activeBtn: undefined,
    showNav: false,
  }),
};
</script>

We add the scroll-threshold prop to set the number of pixels to scroll down until the navbar is shown.

Bottom Sheets

The bottom sheet is another container for content.

It shows at the bottom of the page.

We can add one with the v-bottom-sheet component:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-card class="overflow-hidden mx-auto" height="200" max-width="500">
          <v-bottom-sheet v-model="sheet" persistent>
            <template v-slot:activator="{ on, attrs }">
              <v-btn color="green" dark v-bind="attrs" v-on="on">Open Persistent</v-btn>
            </template>
            <v-sheet class="text-center" height="200px">
              <v-btn class="mt-6" text color="error" @click="sheet = !sheet">close</v-btn>
              <div class="py-3">Lorem ipsum</div>
            </v-sheet>
          </v-bottom-sheet>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    sheet: false,
  }),
};
</script>

We add the v-bottom-sheet component to show the sheet content when we click on the Open Persistent button.

The Open Persistent button should be in the activator slot to let us toggle the bottom sheet.

The v-model sets the open state of the bottom sheet.

It’ll open when it’s true .

v-model Control

We can use v-model to control the bottom sheet.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <div class="text-center">
          <v-btn color="blue" dark @click="sheet = !sheet">Open v-model</v-btn>
          <v-bottom-sheet v-model="sheet">
            <v-sheet class="text-center" height="200px">
              <v-btn class="mt-6" text color="red" @click="sheet = !sheet">close</v-btn>
              <div class="py-3">Lorem ipsum</div>
            </v-sheet>
          </v-bottom-sheet>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    sheet: false,
  }),
};
</script>

We have the Open v-model button to toggle the bottom sheet.

Conclusion

We can add a bottom sheet to display content at the bottom of the page.

It can be toggled.

Vuetify is a popular UI framework for Vue apps.

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

Horizontal Nav Bar

We can add the horizontal prop to make the bottom nav text show beside the icon instead of below it:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-bottom-navigation :value="activeBtn" color="purple lighten-1" horizontal>
          <v-btn>
            <span>History</span>
            <v-icon>mdi-history</v-icon>
          </v-btn>

          <v-btn>
            <span>Favorites</span>
            <v-icon>mdi-heart</v-icon>
          </v-btn>

          <v-btn>
            <span>Map</span>
            <v-icon>mdi-map-marker</v-icon>
          </v-btn>
        </v-bottom-navigation>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    activeBtn: undefined,
  }),
};
</script>

Shift

The shift prop lets us hide the button text until it’s active.

The v-btn text in the bar should be wrapped with a span tag.

For instance, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-bottom-navigation :value="activeBtn" color="purple lighten-1" shift>
          <v-btn>
            <span>History</span>
            <v-icon>mdi-history</v-icon>
          </v-btn>

          <v-btn>
            <span>Favorites</span>
            <v-icon>mdi-heart</v-icon>
          </v-btn>

          <v-btn>
            <span>Map</span>
            <v-icon>mdi-map-marker</v-icon>
          </v-btn>
        </v-bottom-navigation>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    activeBtn: undefined,
  }),
};
</script>

We just add a shift prop to make the text show only when an icon is clicked.

Toggle

The display state of the v-bottom-navigation can be toggled with the input-value prop.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <div class="overflow-hidden">
          <div class="text-center mb-2">
            <v-btn text color="deep-purple" @click="showNav = !showNav">Toggle Nav</v-btn>
          </div>

<v-bottom-navigation :value="activeBtn" color="purple lighten-1" :input-value="showNav">
            <v-btn>
              <span>History</span>
              <v-icon>mdi-history</v-icon>
            </v-btn>

            <v-btn>
              <span>Favorites</span>
              <v-icon>mdi-heart</v-icon>
            </v-btn>

            <v-btn>
              <span>Map</span>
              <v-icon>mdi-map-marker</v-icon>
            </v-btn>
          </v-bottom-navigation>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    activeBtn: undefined,
    showNav: false,
  }),
};
</script>

We added a v-btn to toggle the nav.

When showNav is true then it’s shown.

Otherwise, it’s hidden.

We set the input-value to show the nav.

Hide on Scroll

We can show the v-bottom-navigation only when the target element is scrolled.

To do that, we add the hide-on-scroll prop with the scroll-target prop set to the selector of them item we’re scrolling.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-card class="overflow-hidden mx-auto" height="200" max-width="500">
          <v-bottom-navigation scroll-target="#scroll-area" hide-on-scroll absolute horizontal>
            <v-btn text color="deep-purple accent-4">
              <span>History</span>
              <v-icon>mdi-history</v-icon>
            </v-btn>

            <v-btn text color="deep-purple accent-4">
              <span>Favorites</span>
              <v-icon>mdi-heart</v-icon>
            </v-btn>

            <v-btn text color="deep-purple accent-4">
              <span>Map</span>
              <v-icon>mdi-map-marker</v-icon>
            </v-btn>
          </v-bottom-navigation>

          <v-sheet id="scroll-area" class="overflow-y-auto" max-height="600">
            <v-container style="height: 1500px;"></v-container>
          </v-sheet>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    activeBtn: undefined,
    showNav: false,
  }),
};
</script>

The scroll-target is added to the v-bottom-navigation component.

hide-on-scroll makes it hide on scroll.

Conclusion

We can make the bottom nav bar behave the way we want with Vuetify.

Vuetify is a popular UI framework for Vue apps.

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

Custom Transition

We can create our own transition by using the createSimpleTransition function to create our transition.

First, we define the component in vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { createSimpleTransition } from 'vuetify/lib/components/transitions/createTransition'

const fadeTransition = createSimpleTransition('v-fade-transition')
Vue.component('v-fade-transition', fadeTransition)
Vue.use(Vuetify);

export default new Vuetify({
});

Then we write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-btn class="ma-2" color="primary" @click="expand = !expand">Expand Transition</v-btn>

        <v-fade-transition>
          <v-card v-show="expand" height="100" width="100" class="mx-auto"></v-card>
        </v-fade-transition>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    expand: false,
  }),
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

We defined the v-fade-transition component with:

const fadeTransition = createSimpleTransition('v-fade-transition')
Vue.component('v-fade-transition', fadeTransition)

Then we defined the classes for it with:

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

The prefix fade should be the same one as the word between v- and -transition so that the transition styles will be applied.

Programmatic Scrolling

We can scroll our page programmatically with Vuetify.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-btn ref="button" block color="primary" @click="$vuetify.goTo('#num-100')">scroll</v-btn>

        <p v-for='n in 100' :key='n' :id="`num-${n}`">{{n}}</p>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We have the p elements with some IDs.

And we call $vuetify.goTo to scroll to the element with the given selector.

goTo also takes a second argument with some options.

The option object can have the duration , offset , and easing properties.

We can set the options by writing:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-btn ref="button" block color="primary" @click="$vuetify.goTo('#num-100', options)">scroll</v-btn>

        <p v-for="n in 100" :key="n" :id="`num-${n}`">{{n}}</p>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    options: {
      duration: 1300,
      offset: 0,
      easing: "easeInOutCubic",
    },
  }),
};
</script>

And we set the option for scrolling.

Alerts

We can add an alert with the v-alert component.

It comes with 4 default styles, which are success , info , warning , and error .

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-alert type="success">success alert.</v-alert>

        <v-alert type="info">info alert.</v-alert>

        <v-alert type="warning">warning alert.</v-alert>

        <v-alert type="error">error alert.</v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We have the v-alert component with the alerts.

Conclusion

We can scroll programmatically and add alerts with Vuetify.

Also, we can create our own transition components with one function.

Vuetify is a popular UI framework for Vue apps.

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

Toolbars

We can add toolbars with the v-toolbar component.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-card color="grey lighten-4" flat height="200px" tile>
          <v-toolbar prominent extended>
            <v-app-bar-nav-icon></v-app-bar-nav-icon>

            <v-toolbar-title>Title</v-toolbar-title>

            <v-spacer></v-spacer>

            <v-btn icon>
              <v-icon>mdi-magnify</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-heart</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
          </v-toolbar>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

to add a toolbar with the v-toolbar component.

v-app-bar-nav-icon to add the nav icon.

v-toolbar-title lets us add the title.

v-space lets us add spacing to the toolbar items,

v-btn lets us add the buttons.

Dense Toolbars

We can add the dense prop to the v-toolbar to make it denser.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-card color="grey lighten-4" flat height="200px" tile>
          <v-toolbar dense>
            <v-app-bar-nav-icon></v-app-bar-nav-icon>

            <v-toolbar-title>Title</v-toolbar-title>

            <v-spacer></v-spacer>

            <v-btn icon>
              <v-icon>mdi-magnify</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-heart</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
          </v-toolbar>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

to make the toolbar shorter.

Dark Variant

To make the toolbar show with a black background, we can add the dark prop;

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-card color="grey lighten-4" flat height="200px" tile>
          <v-toolbar dark>
            <v-spacer></v-spacer>

            <v-btn icon>
              <v-icon>mdi-reply</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
          </v-toolbar>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Background Color

We can also change the background color of the toolbar.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-card color="grey lighten-4" flat height="200px" tile>
          <v-toolbar color="primary" dark>
            <v-spacer></v-spacer>

            <v-btn icon>
              <v-icon>mdi-reply</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
          </v-toolbar>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We have the color prop set to primary to make it blue.

And we add the dark prop to make the icons white.

Prominent Toolbar with Background

We can add a toolbar with a background image.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-toolbar dark prominent src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg">
          <v-app-bar-nav-icon></v-app-bar-nav-icon>

          <v-toolbar-title>App</v-toolbar-title>

          <v-spacer></v-spacer>

          <v-btn icon>
            <v-icon>mdi-export</v-icon>
          </v-btn>
        </v-toolbar>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We have the v-toolbar component with the dark and prominent props to change the background color.

src sets the URL of the image.

Conclusion

We can add toolbars with various colors, sizes, and a background image.

Vuetify is a popular UI framework for Vue apps.

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

Extended Toolbar

A toolbar can be extended with the extension slot:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-card color="grey lighten-4" flat height="200px" tile>
          <v-toolbar extended>
            <v-app-bar-nav-icon></v-app-bar-nav-icon>

            <v-toolbar-title>Title</v-toolbar-title>

            <v-spacer></v-spacer>

            <v-btn icon>
              <v-icon>mdi-magnify</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-heart</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
          </v-toolbar>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Extension Height

The extension height can be changed with the extension-height prop:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-card color="grey lighten-4" flat height="200px" tile>
          <v-toolbar extended extension-height="150">
            <v-app-bar-nav-icon></v-app-bar-nav-icon>

            <v-toolbar-title>Title</v-toolbar-title>

            <v-spacer></v-spacer>

            <v-btn icon>
              <v-icon>mdi-magnify</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-heart</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
          </v-toolbar>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Collapse

A toolbar can be collapsed to save space.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-card color="grey lighten-4" flat height="200px" tile>
          <v-toolbar collapse>
            <v-btn icon>
              <v-icon>mdi-magnify</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
          </v-toolbar>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

to add a collapsed toolbar with the collapse prop.

Flexible Toolbar and Card Toolbar

We can make a flexible toolbar that’s added to cards.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-card flat>
          <v-toolbar color="primary" dark extended flat>
            <v-app-bar-nav-icon></v-app-bar-nav-icon>
          </v-toolbar>

          <v-card class="mx-auto" max-width="700" style="margin-top: -64px;">
            <v-toolbar flat>
              <v-toolbar-title class="grey--text">Title</v-toolbar-title>

              <v-spacer></v-spacer>

              <v-btn icon>
                <v-icon>mdi-magnify</v-icon>
              </v-btn>

              <v-btn icon>
                <v-icon>mdi-apps</v-icon>
              </v-btn>

              <v-btn icon>
                <v-icon>mdi-dots-vertical</v-icon>
              </v-btn>
            </v-toolbar>

            <v-divider></v-divider>

            <v-card-text style="height: 200px;"></v-card-text>
          </v-card>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We put the v-toolbar in a v-card to embed the toolbar on the card.

And we have another v-card inside it with another v-toolbar to display the toolbar content.

Conclusion

We can add toolbars to various containers with Vuetify.