@ptlm-azulejo/overlay
v0.0.1-alpha.15
Published
An overlay is a semi-transparent layer that appears on top of the main content, typically used to dim the background and focus user attention on a specific element. It is often combined with modals, popovers, or loading states to create a visual separatio
Readme
Overlay
An overlay is a semi-transparent layer that appears on top of the main content, typically used to dim the background and focus user attention on a specific element. It is often combined with modals, popovers, or loading states to create a visual separation between the foreground and background. Overlays help prevent unintended interactions while keeping the primary content accessible.
Installation
npm install @ptlm-azulejo/overlay @ptlm-azulejo/themes
# or
yarn add @ptlm-azulejo/overlay @ptlm-azulejo/themesStyles & theming
The component reads theme CSS variables, so it needs @ptlm-azulejo/themes. Import a
brand preset (it bundles the base tokens) and the component styles, then set the
brand class on the root element:
import '@ptlm-azulejo/themes/presets/leroy-merlin.css' // or /presets/adeo.css
import '@ptlm-azulejo/overlay/style.css'<html class="preset-lm" data-theme="dark">Without a preset and the
.preset-*class, the component renders uncolored. See the themes package for brand switching, dark mode, and custom brands.
Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| isVisible | boolean | — | Controls the visibility of the overlay. |
| dialogLabel | string | — | Accessible label for the overlay dialog. |
Slots
| Name | Description |
| --- | --- |
| default | Use this slot to insert centered content inside the overlay. |
Basic Usage
<script setup>
import { AzOverlay } from '@ptlm-azulejo/overlay'
import { ref } from 'vue'
const visible = ref(false)
</script>
<template>
<button @click="visible = !visible">Toggle overlay</button>
<AzOverlay :is-visible="visible">
<p>Overlay content</p>
</AzOverlay>
</template>