Documentation / @zerotal/admin / index / AdminLayout

Class: AdminLayout

Defined in: admin/src/ui/AdminLayout.tsx:18

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;
}

Extends

Layout

Constructors

Constructor

new AdminLayout(): AdminLayout

Returns

AdminLayout

Inherited from

Layout.constructor

Properties

panel

static panel: PanelInstance | undefined

Defined in: admin/src/ui/AdminLayout.tsx:24

The panel this shell belongs to. The base class serves whichever panel owns the request; makeAdminLayout binds a specific one, which is what every generated page uses so a WebSocket action can't drift to a sibling.