Files
directus/docs/reference/app/components/v-overlay.md
Nitwel c2e7c85bbd Update documentation of app (#4222)
* move component docs to documentation

* update app docs tables for components

* update docs

* Add components to docs sidebar

* fix generated tables

* fix tables

* rename transitions

* update tables

* update nested components

* update tables

* update tables

* update tables

* update v-table table

* add basic documentation to each component

* remove all stories of storybook

* add missing documentation

* undate tables

* update tables

* update docs sidebar

* update app docs

* remove unused references

* add general readme

* update docs

* make reference titiles smaller

* add reference tag

* improve docs

* update order of tabs in sidebar

* remove all readmes and stories from interfaces/displays

* Cleanup menu

* Remove storybook

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
2021-02-24 17:48:19 -05:00

1.2 KiB

Overlay

The overlay is a fairly barebones component that's meant to be used with modals / confirms / other attention requiring actions.

<v-overlay :active="overlay">
	<v-button @click="overlay = false">Close overlay</v-button>
</v-overlay>

Color

The colors can be changed via the css variable --v-overlay-color.

<v-overlay :active="overlay">
	<v-button @click="overlay = false">Close overlay</v-button>
</v-overlay>
<style>
	.v-overlay {
		--v-overlay-color: rgba(255, 0, 0, 0.5);
	}
</style>

Reference

Props

Prop Description Default Type
active Show / hide the overlay false Boolean
absolute Add position: absolute; false Boolean

CSS Variables

Variable Default
--v-overlay-color var(--overlay-color)
--v-overlay-z-index 600

Events

Event Description Value
click

Slots

Slot Description Data
default