Tari Ibaba is a software developer with years of experience building websites and apps. He has written extensively on a wide range of programming topics and has created dozens of apps and open-source libraries.
A Vue method is a function associated with every Vue instance and created with the methods property. We can use them to perform certain actions when the user interacts with an element, like clicking on a button, or entering data into a text input. Read on to find out more about how to define and use Vue methods.
Creating a Vue Method
To create a method, we assign an object to the method property of the Vue instance. Each key of the object passed corresponds to a method name.
We can access a data property with this.{propertyName}, where propertyName is the name of one of the properties returned from the data() method. For example:
Vue methods can accept arguments like normal JavaScript functions. We can pass arguments by calling the method directly in the template with the parameter values:
We can define methods on a Vue instance by passing an object to the methods property. Vue methods are similar to JavaScript functions and allow us to add interactivity to our Vue apps.
A bottom sheet is a customized v-dialog that is anchored to the bottom of the screen, like a v-bottom-navigation. They are primarily used on mobile and can contain supplementary information and actions. In this article, we’re going to learn how to easily create and customize bottom sheets with the Vuetify bottom sheet component.
The Vuetify Bottom Sheet Component (v-bottom-sheet)
Vuetify provides the v-bottom-sheet component for creating a bottom sheet. Like v-dialog, this component comes with an activator slot that we can use to set a button that will open the sheet when clicked.
<template>
<v-app>
<div class="ma-4 text-center">
<v-bottom-sheet v-model="sheet">
<template v-slot:activator="{ on, attrs }">
<v-btn
v-bind="attrs"
v-on="on"
color="primary"
>
Open Sheet
</v-btn>
</template>
<v-sheet
class="text-center"
height="200px"
>
<v-btn
class="mt-6"
text
color="red"
@click="sheet = !sheet"
>
close
</v-btn>
<div class="my-3">This is a bottom sheet</div>
</v-sheet>
</v-bottom-sheet>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
sheet: false,
}),
};
</script>
<style>
html {
overflow-y: auto !important;
}
</style>
Hide Overlay
v-bottom-sheet comes with a hide-overlay prop that will remove the overlay when set to true.
<template>
<v-app>
<div class="ma-4 text-center">
<v-bottom-sheet
v-model="sheet"
hide-overlay
>
<template v-slot:activator="{ on, attrs }">
<v-btn
v-bind="attrs"
v-on="on"
color="primary"
>
Open Sheet
</v-btn>
</template>
<v-sheet
class="text-center"
height="200px"
>
<v-btn
class="mt-6"
text
color="red"
@click="sheet = !sheet"
>
close
</v-btn>
<div class="my-3">This is a bottom sheet.</div>
</v-sheet>
</v-bottom-sheet>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
sheet: false,
}),
};
</script>
<style>
html {
overflow-y: auto !important;
}
</style>
Vuetify Bottom Sheet v-model
We can set up a two-way binding between the value of the v-bottom-sheet and a variable. We can then use this variable to open/close the sheet or to display certain content conditionally.
<template>
<v-app>
<div class="ma-4 text-center">
<div class="mb-4">
The bottom sheet is {{ sheet ? 'open' : 'closed' }}
</div>
<v-bottom-sheet
v-model="sheet"
hide-overlay
>
<template v-slot:activator="{ on, attrs }">
<v-btn
v-bind="attrs"
v-on="on"
color="primary"
>
Open Sheet
</v-btn>
</template>
<v-sheet
class="text-center"
height="200px"
>
<v-btn
class="mt-6"
text
color="red"
@click="sheet = !sheet"
>
close
</v-btn>
<div class="my-3">This is a bottom sheet</div>
</v-sheet>
</v-bottom-sheet>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
sheet: false,
}),
};
</script>
<style>
html {
overflow-y: auto !important;
}
</style>
Persistent Bottom Sheets
By default, an open bottom sheet closes when another element is clicked:
We can prevent this by setting the persistent prop to true on the v-bottom-sheet:
<template>
<v-app>
<div class="ma-4 text-center">
<v-bottom-sheet
v-model="sheet"
persistent
>
<template v-slot:activator="{ on, attrs }">
<v-btn
v-bind="attrs"
v-on="on"
color="primary"
>
Open Sheet
</v-btn>
</template>
<v-sheet
class="text-center"
height="200px"
>
<v-btn
class="mt-6"
text
color="red"
@click="sheet = !sheet"
>
close
</v-btn>
<div class="my-3">This is a bottom sheet.</div>
</v-sheet>
</v-bottom-sheet>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
sheet: false,
}),
};
</script>
<style>
html {
overflow-y: auto !important;
}
</style>
Vuetify Bottom Sheet Inset
The inset prop reduces the maximum width of the v-bottom-sheet to 70% on larger screens. We can also use the width prop to reduce the width manually.
<template>
<v-app>
<div class="ma-4 text-center">
<v-bottom-sheet
v-model="sheet"
inset
>
<template v-slot:activator="{ on, attrs }">
<v-btn
v-bind="attrs"
v-on="on"
color="primary"
>
Open Sheet
</v-btn>
</template>
<v-sheet
class="text-center"
height="200px"
>
<v-btn
class="mt-6"
text
color="red"
@click="sheet = !sheet"
>
close
</v-btn>
<div class="my-3">This is a bottom sheet.</div>
</v-sheet>
</v-bottom-sheet>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
sheet: false,
}),
};
</script>
<style>
html {
overflow-y: auto !important;
}
</style>
Creating an “Open In” Component
We can combine a functional list and bottom sheet to create an “open in” component.
Bottom sheets are anchored to the bottom of the screen and can be used to display supplementary content. Vuetify provides the Vuetify bottom sheet component (v-bottom-sheet) for creating and customizing them.
A stepper displays progress through a sequence by separating it into multiple logical and numbered steps. We can use it in scenarios like shopping carts, or cases where an input field determines a subsequent field. In this article, we’re going to learn how to use the Vuetify stepper component to easily create and customize steppers.
The Vuetify Stepper Component (v-stepper)
Vuetify provides the v-stepper component for creating a stepper. We indicate the steps with v-stepper-step components and display content for each step with v-stepper-content components. Every v-stepper-step or v-stepper-content has a step prop that we use to set the step it should be associated with. v-stepper-steps are typically wrapped in a v-stepper-header, while v-stepper-contents are wrapped in a v-stepper-items.
With the color prop of the v-stepper-steps, we can customize the color of completed steps or the current step. We can use any color from the Material Design specs.
An editable step allows the user to return later to modify it. We can make a step editable by setting the editable prop to true on the v-stepper-step associated with it.
Non-editable steps prevent modification once completed. A step is non-editable if the associated v-stepper-step does not have its step prop set to true.
A vertical stepper moves users through the steps along the y-axis and works similarly to a horizontal stepper. We can make a stepper vertical by setting the vertical prop of the v-stepper to true.
A stepper displays progress through numbered steps. We can use the Vuetify stepper component (v-stepper) and its various sub-components to create and customize steppers.
We can use a sparkline to give a visual representation of numerical or statistical information with simple graphs. In this extensive guide, we’ll learn how to use the Vuetify sparkline component to easily create and customize sparklines.
The Vuetify Sparkline Component (v-sparkline)
Vuetify provides the v-sparkline component for creating a sparkline. It has a value prop that takes an array containing the data to be represented:
With the smooth prop, we can set the roundness of the corners formed from the sparkline tracing the data points. We can pass a number or a boolean value to smooth. Setting it to true sets a corner radius of 8px. In the code example below, we set it to 5 (for a corner radius of 5px):
By setting the type prop to bar, we can make v-sparkline show a set of bars instead of a line. The default type is trend which shows the continuous line.
A sparkline displays simple graphs that visually represent numerical or statistical information. We can use the Vuetify sparkline component (v-sparkline) and its various prop to create and customize sparklines.
Vuetify provides utility classes that allow us to easily configure how content overflows when its size becomes greater than the bounds of its container. We’re going to learn how to use them in this article.
The classes are in the format {overflow}-{value}. overflow can be any of overflow, overflow-x and overflow-y, while value can be any of auto, hidden and visible. Here are all the overflow helper classes from Vuetify:
overflow-auto
overflow-hidden
overflow-visible
overflow-x-auto
overflow-x-hidden
overflow-x-visible
overflow-y-auto
overflow-y-hidden
overflow-y-visible
Vuetify Overflow Classes
overflow-auto: adds scrollbars to an element when its content overflows it bounds in the vertical or horizontal direction.
overflow-hidden: clips content that overflows the bounds of its container in the vertical or horizontal direction.
overflow-visible: allows content to be rendered outside the bounds of its container in the vertical or horizontal direction.
<template>
<v-app>
<v-row class="ma-4">
<v-col cols="4">
<v-card
class="overflow-auto"
height="200"
>
<v-card-text style="width: 300px">
<h3>Overflow Auto</h3>
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quam repudiandae magnam dolor
asperiores nisi officia, necessitatibus, ex
alias consequuntur ullam qui optio, obcaecati
minima modi quaerat explicabo. Quia, ipsa minus.
Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Delectus, voluptatum? Nobis
ratione eos praesentium. Iusto pariatur magni
eveniet provident hic incidunt iure minima
voluptatem. Corrupti alias delectus in culpa
quis.
</v-card-text>
</v-card>
</v-col>
<v-col cols="4">
<v-card
class="overflow-hidden"
height="200"
>
<v-card-text style="width: 300px">
<h3>Overflow Hidden</h3>
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quam repudiandae magnam dolor
asperiores nisi officia, necessitatibus, ex
alias consequuntur ullam qui optio, obcaecati
minima modi quaerat explicabo. Quia, ipsa minus.
Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Delectus, voluptatum? Nobis
ratione eos praesentium. Iusto pariatur magni
eveniet provident hic incidunt iure minima
voluptatem. Corrupti alias delectus in culpa
quis.
</v-card-text>
</v-card>
</v-col>
<v-col cols="4">
<v-card
class="overflow-visible"
height="200"
>
<v-card-text style="width: 300px">
<h3>Overflow Visible</h3>
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quam repudiandae magnam dolor
asperiores nisi officia, necessitatibus, ex
alias consequuntur ullam qui optio, obcaecati
minima modi quaerat explicabo. Quia, ipsa minus.
Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Delectus, voluptatum? Nobis
ratione eos praesentium. Iusto pariatur magni
eveniet provident hic incidunt iure minima
voluptatem. Corrupti alias delectus in culpa
quis.
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
Vuetify Overflow Y Classes
overflow-y-auto: adds scrollbars to an element when its content overflows it bounds in the vertical direction.
overflow-y-hidden: clips content that overflows the bounds of its container in the vertical direction.
overflow-y-visible: allows content to be rendered outside the bounds of its container in the vertical direction.
<template>
<v-app>
<v-row class="ma-4">
<v-col cols="4">
<v-card
class="overflow-y-auto"
height="200"
>
<v-card-text>
<h3>Overflow Y Auto</h3>
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Praesentium, culpa eum
repellat asperiores ad alias voluptas. Aliquid
consectetur, quo delectus distinctio
voluptatibus, numquam sequi hic eum mollitia
optio quam esse?
</v-card-text>
</v-card>
</v-col>
<v-col cols="4">
<v-card
class="overflow-y-hidden"
height="200"
>
<v-card-text>
<h3>Overflow Y Hidden</h3>
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Praesentium, culpa eum
repellat asperiores ad alias voluptas. Aliquid
consectetur, quo delectus distinctio
voluptatibus, numquam sequi hic eum mollitia
optio quam esse?
</v-card-text>
</v-card>
</v-col>
<v-col cols="4">
<v-card
class="overflow-y-visible"
height="200"
>
<v-card-text>
<h3>Overflow Y Visible</h3>
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Praesentium, culpa eum
repellat asperiores ad alias voluptas. Aliquid
consectetur, quo delectus distinctio
voluptatibus, numquam sequi hic eum mollitia
optio quam esse?
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
Vuetify Overflow X Classes
overflow-x-auto: adds scrollbars to an element when its content overflows it bounds in the horizontal direction.
overflow-x-hidden: clips content that overflows the bounds of its container in the horizontal direction.
overflow-x-visible: allows content to be rendered outside the bounds of its container in the horizontal direction.
<template>
<v-app>
<div style="width: 300px;white-space:nowrap" class="ma-4">
<h3 class="mb-3">Overflow X Auto</h3>
<p class="overflow-x-auto blue lighten-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam repudiandae magnam dolor asperiores nisi officia, necessitatibus, ex alias consequuntur ullam qui optio, obcaecati minima modi quaerat explicabo. Quia, ipsa minus.
</p>
<h3 class="mb-3">Overflow X Hidden</h3>
<p class="overflow-x-hidden blue lighten-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam repudiandae magnam dolor asperiores nisi officia, necessitatibus, ex alias consequuntur ullam qui optio, obcaecati minima modi quaerat explicabo. Quia, ipsa minus.
</p>
<h3 class="mb-3">Overflow X Visible</h3>
<p class="overflow-x-visible blue lighten-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam repudiandae magnam dolor asperiores nisi officia, necessitatibus, ex alias consequuntur ullam qui optio, obcaecati minima modi quaerat explicabo. Quia, ipsa minus.
</p>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
Conclusion
We can use the overflow helper classes from Vuetify to control what happens to content that overflows the bounds of its container in the vertical or horizontal direction.
In this article, we’ll learn about the Vuetify calendar component and its various props and slots for creating and customizing calendars that can display events and other time-related information in various ways.
The Vuetify calendar component (v-calendar)
Vuetify provides the v-calendar component for displaying a calendar.
We can display events in the calendar with the events prop. This property takes an array with each element representing one event. Each item in the array is an object that has a number of properties, including:
name: sets the name of the event.
start: sets the start date of the event.
end: sets the end date of the event.
timed: specifies whether the event has a defined time range or not.
The v-calendar component provides various ways of customizing the colors of its different parts. For example, we can set the color of a single event by passing a value to the color property of the object representing the event:
We can also the event-color prop to set the color of all events without a specified color. The color prop of v-calendar sets the color of the circle that indicates the current date in the calendar, and the color of the current day of the week.
By default, the calendar component displays information for each month. We can customize the view the calendar shows with the type prop. We can display information just for a particular day by setting type to day:
There are various slots of the v-calendar component that we use to customize how the calendar displays in the day view. We can use the day-header slot to customize the content that is placed in the top container in the day view. We also have the interval slot, for customizing the content that is placed in the interval space in the day view.
v-calendar comes with certain click events that we can use to add interactivity to the calendar. For example, we can listen for the @click:day event to perform an action when the user clicks a day in the calendar. Similarly, we can listen for the @click:event event to perform an action when the user clicks on an event in the calendar. We use both click events in the code example below.
The calendar starts out in the month view. When the user clicks a day, we change the calendar to the day view:
We also created a menu that will display information about an event when the user clicks it in the day or month view:
Custom calendar buttons
Calendar day slot
We can use the day slot of v-calendar to customize how a day is displayed in the week or month view. In the example below, we use this slot to create a calendar that displays the percentage of a day that was used for activities of a certain category.
We can use the Vuetify calendar component (v-calendar) to create a calendar that displays events and other information for our application. This component comes with various props and slots that we can use to easily customize its appearance and behavior.
A floating action button (FAB) is used to signify the primary action to be taken on a particular screen. In this post, we’re going to learn how to use the button component (v-btn) to create FABs.
v-btn fab Prop
We can create an FAB by setting the fab prop of the button component to true:
With the speed dial component (v-speed-dial), an FAB can emit a stack of related actions when pressed:
<template>
<v-app>
<v-speed-dial
v-model="fab"
direction="top"
transition="slide-y-reverse-transition"
absolute
bottom
right
>
<template v-slot:activator>
<v-btn
v-model="fab"
color="blue darken-2"
dark
fab
>
<v-icon v-if="fab"> mdi-close </v-icon>
<v-icon v-else> mdi-image </v-icon>
</v-btn>
</template>
<v-btn
fab
small
>
<v-icon>mdi-pencil</v-icon>
</v-btn>
<v-btn
fab
small
>
<v-icon>mdi-plus</v-icon>
</v-btn>
<v-btn
fab
small
>
<v-icon>mdi-star</v-icon>
</v-btn>
</v-speed-dial>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
fab: false,
}),
};
</script>
Using FABs in Lateral Screens
There are certain instances where we have FABs with different actions on screens next to each other, like the content screens of a set of tab items. We can display a transition to signify the change of action with the fab-transition component. fab-transition works with the key prop of the v-btn. It triggers the transition when the FAB key changes.
A floating action button (FAB) is used to indicate the main action to be performed on a screen. We can use the fab prop of the v-btn component in combination with various other props to create and customize FABs.
The Vuetify rating component is useful for collecting user feedback. Users can use it to indicate their level of satisfaction with certain content. Read on to find out more about this component and the various ways in which we can customize it.
We can use v-model to set up a two-way binding between the value of the v-rating and a variable. In the code example below, we use v-model to create a rating component with text below it displaying the current value:
We can use the Vuetify rating component (v-rating) in our application to collect user feedback. This component comes with various props and slots that allow customization.
A bottom navigation bar is an alternative to a sidebar or navigation drawer. It is used mainly in mobile applications and enables quick navigation to the top-level destinations of an app. In this article, we’re going to learn about the Vuetify bottom navigation component and how we can use it to easily create and customize bottom navigation bars.
The Vuetify Bottom Navigation Component (v-bottom-navigation)
Vuetify provides the v-bottom-navigation component for creating bottom navigation bars. It includes a set of v-btns for navigation. We can use the value prop of v-bottom-navigation to set the currently active button programmatically. The button with a matching value prop will be made active. By default, the value of each button is set to its zero-based index in the set of buttons on the bottom navigation bar, i.e., the first button has its value set to 0, the second button to 1, the third to 2, and so on. But we can set a custom value to the value prop of a v-btn to change this.
<template>
<v-app>
<v-app-bar
color="primary"
app
dark
>
<v-toolbar-title>App Bar</v-toolbar-title>
</v-app-bar>
<v-main>
<v-container
>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quis blanditiis beatae praesentium repudiandae
sunt officiis, vero maxime officia obcaecati nisi
excepturi. Sit laboriosam provident laborum? Rem
recusandae ea possimus illo.</v-container
>
</v-main>
<v-bottom-navigation
v-model="value"
app
>
<v-btn
value="music"
height="100%"
>
<span>Music</span>
<v-icon>mdi-music</v-icon>
</v-btn>
<v-btn
value="books"
height="100%"
>
<span>Books</span>
<v-icon>mdi-book</v-icon>
</v-btn>
<v-btn
value="photos"
height="100%"
>
<span>Photos</span>
<v-icon>mdi-image</v-icon>
</v-btn>
</v-bottom-navigation>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({ value: 'music' }),
};
</script>
Vuetify Bottom Navigation Color
We can use the color prop of v-bottom-navigation to set the color of the active button on the bottom navigation bar. We can use any color from the Material Design specs.
<template>
<v-app>
<v-app-bar
color="primary"
app
dark
>
<v-toolbar-title>App Bar</v-toolbar-title>
</v-app-bar>
<v-main>
<v-container
>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quis blanditiis beatae praesentium repudiandae
sunt officiis, vero maxime officia obcaecati nisi
excepturi. Sit laboriosam provident laborum? Rem
recusandae ea possimus illo.</v-container
>
</v-main>
<v-bottom-navigation
v-model="value"
app
color="primary"
>
<v-btn
value="music"
height="100%"
>
<span>Music</span>
<v-icon>mdi-music</v-icon>
</v-btn>
<v-btn
value="books"
height="100%"
>
<span>Books</span>
<v-icon>mdi-book</v-icon>
</v-btn>
<v-btn
value="photos"
height="100%"
>
<span>Photos</span>
<v-icon>mdi-image</v-icon>
</v-btn>
</v-bottom-navigation>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({ value: 'music' }),
};
</script>
Background Color
Use the background-color prop to set the background color of the bottom navigation bar.
<template>
<v-app>
<v-app-bar
:color="color"
app
dark
>
<v-toolbar-title>App Bar</v-toolbar-title>
</v-app-bar>
<v-main>
<v-container
>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quis blanditiis beatae praesentium repudiandae
sunt officiis, vero maxime officia obcaecati nisi
excepturi. Sit laboriosam provident laborum? Rem
recusandae ea possimus illo.</v-container
>
</v-main>
<v-bottom-navigation
v-model="value"
app
:background-color="color"
dark
>
<v-btn
value="music"
height="100%"
:color="color"
>
<span>Music</span>
<v-icon>mdi-music</v-icon>
</v-btn>
<v-btn
value="books"
height="100%"
:color="color"
>
<span>Books</span>
<v-icon>mdi-book</v-icon>
</v-btn>
<v-btn
value="photos"
height="100%"
:color="color"
>
<span>Photos</span>
<v-icon>mdi-image</v-icon>
</v-btn>
</v-bottom-navigation>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: 'music',
color: 'purple accent-4',
}),
};
</script>
v-model
We can use v-model to set up a two-way binding between the currently active button and a variable. In the code example below, we change the title of the app bar to the text of the button that becomes active when clicked.
<template>
<v-app>
<v-app-bar
:color="color"
app
dark
>
<v-toolbar-title>
{{ capitalize(value) }}
</v-toolbar-title>
</v-app-bar>
<v-main>
<v-container
>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quis blanditiis beatae praesentium repudiandae
sunt officiis, vero maxime officia obcaecati nisi
excepturi. Sit laboriosam provident laborum? Rem
recusandae ea possimus illo.</v-container
>
</v-main>
<v-bottom-navigation
v-model="value"
app
:background-color="color"
dark
>
<v-btn
value="music"
height="100%"
:color="color"
>
<span>Music</span>
<v-icon>mdi-music</v-icon>
</v-btn>
<v-btn
value="books"
height="100%"
:color="color"
>
<span>Books</span>
<v-icon>mdi-book</v-icon>
</v-btn>
<v-btn
value="photos"
height="100%"
:color="color"
>
<span>Photos</span>
<v-icon>mdi-image</v-icon>
</v-btn>
</v-bottom-navigation>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: 'music',
color: 'green',
}),
methods: {
capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
},
},
};
</script>
Vuetify Bottom Navigation Grow
We can set the grow prop to true on the v-bottom-navigation to force the v-btn components to fill all the available space. The buttons can have a maximum width of 168px, according to the Bottom Navigation Material Design specs.
<template>
<v-app>
<v-app-bar
:color="color"
app
dark
>
<v-toolbar-title> App Bar </v-toolbar-title>
</v-app-bar>
<v-main>
<v-container
>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quis blanditiis beatae praesentium repudiandae
sunt officiis, vero maxime officia obcaecati nisi
excepturi. Sit laboriosam provident laborum? Rem
recusandae ea possimus illo.</v-container
>
</v-main>
<v-bottom-navigation
v-model="value"
app
:background-color="color"
dark
grow
>
<v-btn
value="music"
height="100%"
:color="color"
>
<span>Music</span>
<v-icon>mdi-music</v-icon>
</v-btn>
<v-btn
value="books"
height="100%"
:color="color"
>
<span>Books</span>
<v-icon>mdi-book</v-icon>
</v-btn>
<v-btn
value="photos"
height="100%"
:color="color"
>
<span>Photos</span>
<v-icon>mdi-image</v-icon>
</v-btn>
</v-bottom-navigation>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: 'music',
color: 'green',
}),
};
</script>
Vuetify Bottom Navigation Hide on Scroll
The hide-on-scroll prop hides the bottom navigation bar when scrolling up, and displays it when scrolling down. This is similar to the scrolling techniques supported by the v-app-bar component.
<template>
<v-app>
<v-app-bar
:color="color"
app
dark
>
<v-toolbar-title> App Bar </v-toolbar-title>
</v-app-bar>
<v-main>
<v-responsive
max-height="600"
id="hide-on-scroll-example"
class="overflow-y-auto"
>
<v-responsive
height="1500"
class="ma-4"
>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quis blanditiis beatae praesentium
repudiandae sunt officiis, vero maxime officia
obcaecati nisi excepturi. Sit laboriosam provident
laborum? Rem recusandae ea possimus illo.
</v-responsive>
</v-responsive>
</v-main>
<v-bottom-navigation
v-model="value"
app
:background-color="color"
dark
hide-on-scroll
scroll-target="#hide-on-scroll-example"
>
<v-btn
value="music"
height="100%"
:color="color"
>
<span>Music</span>
<v-icon>mdi-music</v-icon>
</v-btn>
<v-btn
value="books"
height="100%"
:color="color"
>
<span>Books</span>
<v-icon>mdi-book</v-icon>
</v-btn>
<v-btn
value="photos"
height="100%"
:color="color"
>
<span>Photos</span>
<v-icon>mdi-image</v-icon>
</v-btn>
</v-bottom-navigation>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: 'music',
color: 'indigo',
}),
};
</script>
Vuetify Bottom Navigation Scroll Threshold
The scroll-threshold prop sets the distance a user must scroll up to before the bottom navigation bar is hidden. For example, setting scroll-treshold to 0 means the v-bottom-navigation will only get hidden when the user scrolls up to the very top of the page:
<template>
<v-app>
<v-app-bar
:color="color"
app
dark
>
<v-toolbar-title> App Bar </v-toolbar-title>
</v-app-bar>
<v-main>
<v-responsive
max-height="600"
id="hide-on-scroll-example"
class="overflow-y-auto"
>
<v-responsive
height="1500"
class="ma-4"
>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quis blanditiis beatae praesentium
repudiandae sunt officiis, vero maxime officia
obcaecati nisi excepturi. Sit laboriosam provident
laborum? Rem recusandae ea possimus illo.
</v-responsive>
</v-responsive>
</v-main>
<v-bottom-navigation
v-model="value"
app
:background-color="color"
dark
hide-on-scroll
scroll-target="#hide-on-scroll-example"
scroll-threshold="0"
>
<v-btn
value="music"
height="100%"
:color="color"
>
<span>Music</span>
<v-icon>mdi-music</v-icon>
</v-btn>
<v-btn
value="books"
height="100%"
:color="color"
>
<span>Books</span>
<v-icon>mdi-book</v-icon>
</v-btn>
<v-btn
value="photos"
height="100%"
:color="color"
>
<span>Photos</span>
<v-icon>mdi-image</v-icon>
</v-btn>
</v-bottom-navigation>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: 'music',
color: 'indigo',
}),
};
</script>
Vuetify Bottom Navigation Horizontal
With the horizontal prop, we can position the button text inline with the provided v-icon.
<template>
<v-app>
<v-app-bar
:color="color"
app
dark
>
<v-toolbar-title> App Bar </v-toolbar-title>
</v-app-bar>
<v-main>
<v-container>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quis blanditiis beatae praesentium repudiandae
sunt officiis, vero maxime officia obcaecati nisi
excepturi. Sit laboriosam provident laborum? Rem
recusandae ea possimus illo.
</v-container>
</v-main>
<v-bottom-navigation
v-model="value"
app
:background-color="color"
dark
horizontal
>
<v-btn
value="music"
height="100%"
:color="color"
>
<span>Music</span>
<v-icon>mdi-music</v-icon>
</v-btn>
<v-btn
value="books"
height="100%"
:color="color"
>
<span>Books</span>
<v-icon>mdi-book</v-icon>
</v-btn>
<v-btn
value="photos"
height="100%"
:color="color"
>
<span>Photos</span>
<v-icon>mdi-image</v-icon>
</v-btn>
</v-bottom-navigation>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: 'music',
color: 'primary',
}),
};
</script>
Vuetify Bottom Navigation Shift
We can the shift prop to hide the text of the navigation bar buttons that are not active.
<template>
<v-app>
<v-app-bar
:color="color"
app
dark
>
<v-toolbar-title> App Bar </v-toolbar-title>
</v-app-bar>
<v-main>
<v-container>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quis blanditiis beatae praesentium repudiandae
sunt officiis, vero maxime officia obcaecati nisi
excepturi. Sit laboriosam provident laborum? Rem
recusandae ea possimus illo.
</v-container>
</v-main>
<v-bottom-navigation
v-model="value"
app
:background-color="color"
dark
shift
>
<v-btn
value="music"
height="100%"
:color="color"
>
<span>Music</span>
<v-icon>mdi-music</v-icon>
</v-btn>
<v-btn
value="books"
height="100%"
:color="color"
>
<span>Books</span>
<v-icon>mdi-book</v-icon>
</v-btn>
<v-btn
value="photos"
height="100%"
:color="color"
>
<span>Photos</span>
<v-icon>mdi-image</v-icon>
</v-btn>
</v-bottom-navigation>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: 'music',
color: 'primary',
}),
};
</script>
Vuetify Bottom Navigation Toggle
We can use the input-value prop of v-bottom-navigation to toggle the visibility of the bottom navigation bar:
<template>
<v-app>
<v-app-bar
:color="color"
app
dark
>
<v-toolbar-title> App Bar </v-toolbar-title>
</v-app-bar>
<v-main>
<v-container>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quis blanditiis beatae praesentium repudiandae
sunt officiis, vero maxime officia obcaecati nisi
excepturi. Sit laboriosam provident laborum? Rem
recusandae ea possimus illo.
<v-row justify="center">
<v-btn
class="ma-8"
outlined
:color="color"
@click="active = !active"
>
Toggle Navigation
</v-btn>
</v-row>
</v-container>
</v-main>
<v-bottom-navigation
v-model="value"
app
:background-color="color"
dark
:input-value="active"
>
<v-btn
value="music"
height="100%"
:color="color"
>
<span>Music</span>
<v-icon>mdi-music</v-icon>
</v-btn>
<v-btn
value="books"
height="100%"
:color="color"
>
<span>Books</span>
<v-icon>mdi-book</v-icon>
</v-btn>
<v-btn
value="photos"
height="100%"
:color="color"
>
<span>Photos</span>
<v-icon>mdi-image</v-icon>
</v-btn>
</v-bottom-navigation>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
value: 'music',
color: 'purple accent-4',
active: true,
}),
};
</script>
Conclusion
We can use a bottom navigation bar in place of a sidebar or navigation drawer for quick and easy navigation to important destinations in our app. Vuetify provides the bottom navigation component (v-bottom-navigation) for creating bottom navigation bars.
We can use a banner to display a message to the user with one or two related actions. It can be single-line or multi-line and can contain icons that fit in with the message and actions. Read on to find out more on how to create and customize banners with the Vuetify banner component.
The Vuetify Banner Component (v-banner)
We can use the v-banner component from Vuetify to create a banner. It is multi-line by default.
<template>
<v-app>
<v-banner>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. A necessitatibus dicta voluptatibus, recusandae
exercitationem, consequuntur asperiores deleniti ut
sequi officia animi architecto.
</v-banner>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
Single Line Banner
Use the single-line prop on a v-banner to make the message on the banner occupy only one line. It will be truncated with an ellipsis if it’s too long.
<template>
<v-app>
<v-banner single-line>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. A necessitatibus dicta voluptatibus, recusandae
exercitationem, consequuntur asperiores deleniti ut
sequi officia animi architecto.
</v-banner>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
Vuetify Banner Color
Vuetify allows us to customize the color of the v-banner component with the color prop. We can use any color from the Material Design spec.
<template>
<v-app>
<v-banner
color="primary"
dark
class="ma-4"
>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. A necessitatibus dicta voluptatibus, recusandae
exercitationem, consequuntur asperiores deleniti ut
sequi officia animi architecto.
</v-banner>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
Vuetify Banner Sticky
The sticky prop sets the position CSS property of the banner element to sticky.
<template>
<v-app>
<div
style="max-height: 400px"
class="overflow-y-auto"
>
<v-banner
sticky
color="white"
>
Sticky banner
</v-banner>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Dicta voluptatibus maxime ullam cum quasi ad
placeat qui ipsa odit quam sit nemo, laborum fuga enim
saepe dolorum ex aperiam tempora? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Quasi iste
earum nihil? Distinctio natus in cumque tempora veniam
placeat consectetur, consequatur recusandae quaerat
qui impedit ea cum, perferendis ipsum excepturi. Lorem
ipsum dolor sit amet consectetur adipisicing elit.
Libero impedit quo doloremque perferendis odit
consequuntur maxime iure sint vel autem ipsa, eveniet
dolore exercitationem, perspiciatis porro numquam
earum laudantium laborum. Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Totam ducimus laborum
suscipit distinctio tempore alias quos quasi eius
praesentium itaque quas error fugit numquam, beatae
sint dolor quis, officiis dignissimos. Lorem ipsum
dolor sit amet consectetur adipisicing elit. Quas
aliquid quia fugiat repudiandae ea, autem commodi
praesentium obcaecati, corrupti sed ipsum dolores
illum sit cum, officiis esse! Culpa, temporibus minus!
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Sint placeat animi omnis nemo possimus quam
optio earum ut amet aspernatur, consectetur nesciunt
rem. Earum exercitationem, tempora blanditiis tenetur
nemo magnam. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Nulla quisquam possimus officia,
doloremque dolorum facere perspiciatis eaque rem
quibusdam pariatur, laborum quod similique eius
eligendi vero dicta ipsam iusto amet! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Pariatur
ad labore doloribus voluptatem esse necessitatibus
totam eaque fugit. Libero dolore autem totam sed
possimus iure aspernatur dolorum voluptate odit
laborum? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quidem distinctio necessitatibus
optio, quos id sint eius cupiditate. Itaque ipsum
atque ad hic officiis vero earum, voluptatum debitis
consectetur dolore unde. Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Eaque ullam cumque
quasi unde illum, dolorem vel vero veritatis magnam
consequatur commodi consectetur architecto dicta
expedita ducimus officiis facilis sed ab. Lorem ipsum
dolor sit, amet consectetur adipisicing elit. Minima
veritatis neque quaerat fuga qui iste consectetur, in
ab facilis quia laudantium voluptatum iusto ratione
aliquid necessitatibus ipsam aspernatur sit
dignissimos. Lorem ipsum dolor sit amet consectetur
adipisicing elit. A ipsa pariatur modi, exercitationem
minus quo dolorem reiciendis deserunt iste quod
provident porro praesentium at sequi laboriosam qui
cum saepe sint. Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Eum ab obcaecati
perferendis. Deleniti modi eaque saepe inventore, a
non officia ut quisquam illo fuga natus temporibus.
Aliquid ab veritatis eius? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Sed ipsam iste laborum
minima debitis modi corrupti, eos obcaecati aut magni,
quod earum quaerat nobis esse eveniet omnis eligendi
aspernatur voluptate! Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Nesciunt facilis fuga
quas sed autem eligendi rerum dolorem optio. Nulla
obcaecati veniam sunt ipsa exercitationem reiciendis
totam dolorem tenetur fuga provident. Lorem ipsum
dolor sit amet consectetur adipisicing elit.
Temporibus ratione magni ipsam iure minima modi
obcaecati nihil tempora debitis, quaerat corporis
ipsum assumenda maiores nisi laboriosam doloremque.
Ab, sapiente fuga! Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Tempore non voluptate
quisquam quod, aliquam sequi maiores dolorum minima
dolorem! Distinctio autem quaerat accusamus iusto
beatae laudantium dicta omnis cum fuga. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Quas,
aspernatur sint maxime officiis cumque inventore, amet
illum, soluta eum necessitatibus iure deleniti natus
aut deserunt vitae vel facilis quod voluptatem.
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
Vuetify Banner Outlined
We can add an outline to a banner with the outlined prop:
v-banner also comes with an actions slot that we can use display actions on the banner that the user can take. We use it to place functional buttons on the banner.
The actions slot has a dismiss function in its scope that we can use to hide the banner.
<template>
<v-app>
<v-banner
single-line
class="ma-4"
elevation="2"
color="red"
rounded
dark
>
No internet connection
<template v-slot:actions="{ dismiss }">
<v-btn
text
@click="dismiss"
>
Dismiss
</v-btn>
<v-btn text>Retry</v-btn>
</template>
</v-banner>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
Conclusion
A banner can be used to display messages to the user with one or two actions. We can use the Vuetify banner component (v-banner) to create banners. This component comes with various props and slots for customizing its appearance and behaviour.
