Skip to main content

Layout Web Components

Build dynamic layouts using <uizy-*> custom elements with JavaScript interactivity.

Installation​

import uizy from "@dufeut/uizy";
import "@dufeut/uizy/index.css";

Quick Start​

<uizy-app id="app">
  <!-- System Bar -->
  <uizy-system-bar>System bar</uizy-system-bar>

  <!-- Header -->
  <uizy-header shadow="12">
    <span></span>
    Header
    <span></span>
  </uizy-header>

  <!-- Left Drawers -->
  <uizy-drawer open shadow="6" clip-top clip-bottom> Left Sidebar </uizy-drawer>

  <!-- Right Drawers -->
  <uizy-drawer right open shadow="6" clip-top clip-bottom>
    Right Sidebar
  </uizy-drawer>

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

  <!-- Main Content -->
  <uizy-main clip-top clip-bottom clip-left clip-right>
    <p>Main content here</p>
  </uizy-main>

  <!-- Footer -->
  <uizy-footer shadow="12">Footer</uizy-footer>
</uizy-app>

Available Components​

ComponentDescription
<uizy-app>Root container that manages all layout components
<uizy-system-bar>Top bar for system status or branding
<uizy-header>Main application header
<uizy-footer>Fixed footer
<uizy-drawer>Animated slide-in panels
<uizy-overlay>Semi-transparent backdrop
<uizy-main>Main content area
<uizy-toggle>Declarative drawer toggle — put any content inside
<uizy-box>Utility component for reactive binding and events

Clipping System​

Clip attributes adjust positioning to account for other layout elements:

AttributeDescription
clip-topPosition below system bar + header
clip-bottomPosition above footer
clip-leftAdd left margin for sidebar
clip-rightAdd right margin for sidebar
clip-systemPosition below system bar only
info

Horizontal clips (clip-left, clip-right) automatically reset on mobile breakpoints.

Next Steps​