WireScript
Components

layout

Define reusable page layouts.

Define reusable page structures that can be shared across multiple screens.

Usage

(layout layout-name
  (header (text "Header"))
  (slot)  ; Screen content goes here
  (footer (text "Footer")))

Using a Layout

(screen home "Home" :desktop :layout layout-name
  (text "This content replaces the slot"))

Auto-Active Navigation

Elements with :to matching the current screen automatically get :active styling:

(layout app-layout
  (nav :row :gap 16
    (button "Home" :ghost :to home)      ; Active when on home
    (button "About" :ghost :to about))   ; Active when on about
  (slot))

Examples

Try it


Header + Footer Layout


Try it


Dashboard Layout


Try it


Mobile Layout


Try it


See Also


input
Form input with 16 input types.
list
List container for repeated items.
On this page
Usage
Using a Layout
Auto-Active Navigation
Examples
Sidebar Layout
Header + Footer Layout
Dashboard Layout
Mobile Layout
See Also