Overlays

v-overlay is the base for components that float over the rest of the page, such as v-menu and v-dialog. It can also be used on its own and comes with everything you need to create a custom popover component.

Basic

In its simplest form, the v-overlay component will add a dimmed layer over your application.

Close

scroll-strategy="close"
Scrolling when the overlay is active will de-activate it.

Reposition

scroll-strategy="reposition"
When using the connected location strategy, this scroll strategy will reposition the overlay element to always respect the activator location.

None

scroll-strategy="none"
No scroll strategy is used.

Contained

A contained overlay is positioned absolutely and contained inside its parent element.

Advanced

Using the v-hover, we are able to add a nice scrim over the information card with additional actions the user can take.

Magento Forests

Travel to the best outdoor experience on planet Earth. A vacation you will never forget!
64 Reviews

Loader

Using the v-overlay as a background, add a progress component to easily create a custom loader.

CONTENTS

  • Introduction

  • Basic

  • Close

  • Reposition

  • None

  • Contained

  • Advanced

  • Loader