mirror of
https://github.com/directus/directus.git
synced 2026-01-30 15:58:22 -05:00
c2e7c85bbd
* 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>
54 lines
1.2 KiB
Markdown
54 lines
1.2 KiB
Markdown
# Overlay
|
|
|
|
The overlay is a fairly barebones component that's meant to be used with modals / confirms / other attention requiring
|
|
actions.
|
|
|
|
```html
|
|
<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`.
|
|
|
|
```html
|
|
<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_ | | |
|