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.
Truncating a string sets a limit on the number of characters to display, usually to save space. We can truncate a string in JavaScript by writing a truncate function that takes the string as the first argument and the maximum number of characters as the second argument.
function truncate(str, length) {
if (str.length > length) {
return str.slice(0, length) + '...';
} else return str;
}
The function truncates the string with the slice method if it has a character count greater than the specified length. Otherwise, it just returns the same string.
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.
We listen for events in an application in order to perform certain actions when they occur. For example, we can display content or fetch data when a button is clicked, a key is pressed, a text input value is changed, and so on. In this article, we’re going to learn how to handle events in Vue apps to enable interactivity.
Listening for Events in Vue
To listen for an event, we pass the handler to a v-on directive attached to an element, for example:
<button v-on:click="handler">Click me</button>
We can also use the @ symbol for a shorter syntax:
<button @click="handler">Click me</button>
There are two types of event handlers in Vue: inline handlers and method handlers.
Inline Event Handlers
To create an inline event handler, we pass inline JavaScript that will be executed when the event is triggered. For example:
Method event handlers are what we use when we have more complex logic spanning multiple lines of code. We pass the name of a method defined on a Vue component to use it to handle the event.
Vue provides event modifiers that allow us to separate our data logic from event-related logic. For example, the .prevent event modifier eliminates the need to call event.preventDefault() in the event handler method:
The .exact modifier lets us control the exact combination of system modifiers needed to trigger an event:
<!-- this will fire even if Alt or Shift is also pressed -->
<button @click.ctrl="handleClick">Button</button>
<!-- this will only fire when Ctrl and no other keys are pressed -->
<button @click.ctrl.exact="handleCtrlClick">Button</button>
<!-- this will only fire when no system modifiers are pressed -->
<button @click.exact="handleClick">Button</button>
Mouse Button Modifiers
Mouse button event modifiers will only call the event handlers for specific buttons. They are:
We can listen for events in Vue by passing inline code or a method handler to the v-on directive for the event. We can apply various modifiers to an event to further customize event trigger conditions.
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.
