Documentation / @zerotal/flow / index / Layout

Abstract Class: Layout

Base class for Flow page layouts — persistent shell UI wrapped around page content.

Remarks

A layout wraps page content with shell UI (nav, sidebars, footers) that outlives page navigation. On flow:navigate, pages that share the same layout class only swap their [data-flow-root] content; the layout shell stays mounted and is never re-rendered or re-sent over the socket. Attach one with static layout = AppLayout on a Component (or override Component.layout for the JSX-native form).

Example

export class AppLayout extends Layout {
  static head = `<link rel="stylesheet" href="/app.css">`;

  render(slot: HtmlNode) {
    return (
      <div>
        <nav>
          <a href="/dashboard" flow:navigate>Dashboard</a>
        </nav>
        <main>{slot}</main>
      </div>
    );
  }
}

export class DashboardPage extends Component {
  static layout = AppLayout;
}