The 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.
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 v-overlay
components.
z-index
gives you the ability to easily change the stack order of the v-overlay
component.
Using 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.