<uizy-app>

The root container that manages all layout components. Required for the JavaScript API to work.

Attributes

Attribute	Description
id	Required for accessing via uizy.get()
class="uizy-ready"	Reveals the app (added automatically by uizy.start())

Usage

<uizy-app id="app">
  <!-- All other components go here -->
</uizy-app>

JavaScript API

Accessing the App

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

  // Use the app instance...
});

Controlling Components with Actions

The action() method lets you control drawers and overlays programmatically:

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

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

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

// Toggle left mini drawer
app.action("left.mini", ({ set }) => set());

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

// Toggle right mini drawer
app.action("right.mini", ({ set }) => set());

// Set overlay to auto (follows drawer state)
app.action("overlay", ({ set }) => set(null));

Action Targets

Target	Description
overlay	Controls the overlay visibility
left	Controls the left drawer
left.mini	Controls the left mini drawer
right	Controls the right drawer
right.mini	Controls the right mini drawer

Set Function Values

Value	Description
true	Open/show the element
false	Close/hide the element
undefined or no arg	Toggle the current state
null	Auto mode (overlay follows drawer state)

Example

<uizy-app id="app">
  <uizy-header shadow="12">
    <button id="menu-btn">Menu</button>
    <span>My App</span>
  </uizy-header>

  <uizy-drawer shadow="6" clip-top clip-bottom> Navigation </uizy-drawer>

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

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

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

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

    document.getElementById("menu-btn").onclick = () => {
      app.action("left", ({ set }) => set());
    };
  });
</script>

Ready Gate

The <uizy-app> element is hidden by default (visibility: hidden) and revealed after uizy.start() completes initialization. This prevents a layout flash where elements (especially drawers) briefly appear in their initial state before JavaScript adjusts them.

How it works

1. CSS hides uizy-app and disables all transitions inside it
2. uizy.start() runs: registers components, resets drawers based on breakpoint, runs your onReady callback
3. The uizy-ready class is added after the next animation frame — the layout appears instantly in its final state

CSS-only usage

If you're using only the CSS without the JS engine, add the uizy-ready class manually:

<uizy-app class="uizy-ready">
  <!-- Your layout -->
</uizy-app>

warning

Without uizy-ready, the <uizy-app> element will remain invisible. If you're not calling uizy.start() or uizy.init(), you must add this class yourself.