mirror of https://github.com/directus/directus.git synced 2026-02-19 10:14:33 -05:00

Files

Rijk van Zanten 668056f3b0 Base component var scoping (#480 )

* Avatar / badge

* Move base component vars to body scope

* Fix global icon override

2020-04-24 18:52:27 -04:00

index.ts

Migrate existing (finished) base components

2020-02-05 15:11:40 -05:00

readme.md

Rename readme's to work with github (#171 )

2020-03-12 16:26:29 -04:00

v-overlay.story.ts

Bump prettier from 1.19.1 to 2.0.2 (#239 )

2020-03-24 10:51:30 -04:00

v-overlay.test.ts

Bump prettier from 1.19.1 to 2.0.2 (#239 )

2020-03-24 10:51:30 -04:00

v-overlay.vue

Base component var scoping (#480 )

2020-04-24 18:52:27 -04:00

readme.md

Overlay

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

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

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>

Props

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

Slots

Slot	Description	Data
default		--

Events

Event	Description	Value
`click`		`MouseEvent`

CSS Variables

Variable	Default
`--v-overlay-color`	`var(--overlay-color)`
`--v-overlay-z-index`	`500`