v-overlay component is used to provide emphasis on a particular element or parts of it. It signals to the user of a state change within the application and can be used for creating loaders, dialogs and more.
In its simplest form, the
v-overlay component will add a dimmed layer over your application.
Select your desired component from below and see the available props, slots, events and functions.
Below is a collection of simple to complex examples.
absolute overlays are positioned absolutely and contained inside of their parent element.
opacity allows you to customize the transparency of
z-index gives you the ability to easily change the stack order of the
v-overlay as a background, add a progress component to easily create a custom loader.
Using the v-hover, we are able to add a nice scrim over the information card with additional actions the user can take.