<uizy-overlay>

Semi-transparent backdrop for modals, drawers, and focus states.

Attributes

Attribute	Description
clip-top	Position below header
clip-bottom	Position above footer

Usage

<uizy-overlay clip-top clip-bottom></uizy-overlay>

CSS Variables

Variable	Default	Description
--uizy-overlay-color	black	Overlay background color
--uizy-overlay-opacity	0.45	Overlay opacity
--uizy-overlay-layer	10	z-index

Controlling the Overlay

Use the app's action() method:

const app = uizy.get("app");

// Show overlay
app.action("overlay", ({ set }) => set(true));

// Hide overlay
app.action("overlay", ({ set }) => set(false));

// Toggle overlay
app.action("overlay", ({ set }) => set());

// Auto mode (follows drawer state)
app.action("overlay", ({ set }) => set(null));

Full-Screen Overlay

For modals that need to cover the entire viewport (including header/footer):

app.action("overlay", ({ set }) => set(true, true)); // second param = full

Example

<uizy-app id="app">
  <uizy-header shadow="12">
    <button id="open-modal">Open Modal</button>
  </uizy-header>

  <uizy-overlay clip-top clip-bottom></uizy-overlay>

  <uizy-main clip-top clip-bottom> Content </uizy-main>
</uizy-app>

<script type="module">
  import uizy from "@dufeut/uizy";

  uizy.init(() => {
    const app = uizy.get("app");

    document.getElementById("open-modal").onclick = () => {
      app.action("overlay", ({ set }) => set(true));
    };
  });
</script>