Parallax scrolling is a visual effect used on web pages where the background content moves at a slower rate than the foreground content. In this article, we’re going to learn how to use the parallax component from Vuetify to create the parallax scrolling effect with background images.
The Vuetify Parallax Component (v-parallax)
We use v-parallax to create a parallax component. It has a src prop for specifying the URL of the image to use for the background.
Vuetify provides a wide range of built-in transitions we can apply to various elements to produce smooth animations that improve the user experience. We can use a transition by setting the transition prop on supported components, or wrapping the component in a transition component like v-expand-transition.
Vuetify Expand Transition
To apply the expand transition to an element, we wrap it in a v-expand-transition component. This transition is used in expansion panels and list groups.
Components like v-menu have an origin prop that allows us to specify the point from which a transition should start. For example, we can make the scale transition start from the center point of both the x-axis and y-axis:
A slide x transition makes the element fade in while also sliding in along the x-axis. Unlike a scroll transition, the element slides out in the same direction it slid in from when closed.
Vuetify comes with a built-in transition system that allows us to easily create smooth animations without writing our own CSS. We can scale, fade or translate a UI element with the various transitions available.
Vuetify comes with helper classes for easily customizing the border radius of an element without creating our own CSS. We’re going to explore these classes in this article.
Pill Class
We can use the rounded-pill class to create a rectangle with rounded corners.
The rounded-0 class removes all border radius from an element. To remove border radius from a specific side, we can use a class of the format rounded-{side}-0, where side can be any of t, r, b, and l. For removing border radius from specific corners, we can use a class of the format rounded-{corner}-0 where corner can be any of tl, tr, br and bl.
To apply border radius to a specific side, we can use a helper class of the format rounded-{side} or rounded-{side}-{size}, where side can be one of t, r, b, and l, and size can be one of sm, lg, and xl.
To set the border radius of a specific corner, we can use a helper class of the format rounded-{corner} or rounded-{corner}-{size}, where corner can be any of tl, tr, br and bl, and size can be any of sm, lg, and xl.
A footer is an area located at the bottom of a web page, after the main content. We can use it to display copyrights, creation dates, and top-level navigation links. In this article, we’re going to learn how to use the Vuetify footer component to easily create footers for our web pages.
The Vuetify Footer Component (v-footer)
Vuetify provides the v-footer component for creating a footer. It functions as a container in its simplest form.
As you can see in the results of the previous example, the footer applies some padding to its content by default. We can use the padless prop to remove it:
Footers can display general information we want to be accessible from any web page of a website. We can use the Vuetify footer component (v-footer) to create them.
Elevation provides important visual cues about the relative distance or depth between two surfaces along the z-axis. Vuetify provides utility classes and props that allow us to easily set the elevation of an element without using creating custom CSS styles.
An elevation helper will customize the shadow elevation of an element when applied. There is a total of 25 elevation levels:
A lot of Vuetify components have an elevation prop for easily setting the elevation.
In the code example below, we use the v-hover component and the v-card elevation prop to change the shadow elevation when the user hovers over the card with the mouse:
For an element without an elevation prop, we can apply one of the elevation helper classes on it to customize the elevation. The classes are of the format elevation-{value}, where value is the elevation level.
Vuetify provides elevation helpers that let us control the relative depth between two surfaces along the z-axis. We can do this by setting the elevation prop on supported components, or applying one of the elevation utility classes.
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.
