Bus UI Shells

AppShell renders the full document frame.

Use the AppShell render boundary when a module owns the whole response document: title, head assets, navigation, main content, footer, and optional mount metadata.

Render boundary

Function	`ui.AppShell`
Boundary data	`gx.Node` slices for navigation, main content, and footer slots
Props	`ui.AppShellProps`
Use for	Top-level HTML documents with safe stylesheet and WASM preload hooks, composed from typed node slots.

Example

Loading AppShell demo...

Go API

import (
  gx "github.com/busdk/bus-gx/pkg/gx"
  ui "github.com/busdk/bus-ui/pkg/ui"
)

navNodes := []gx.Node{
  gx.Element("a", gx.Props{"href": "/accounting/index.html"}, gx.Text("Overview")),
}

mainNodes := []gx.Node{
  gx.Element("h1", nil, gx.Text("Accounting")),
  gx.Element("p", nil, gx.Text("Review imported files and evidence.")),
}

footerNodes := []gx.Node{
  gx.Element("small", nil, gx.Text("Bus UI")),
}

node, err := ui.AppShell(ui.AppShellProps{
  Title: "Accounting",
  NavNodes: navNodes,
  MainNodes: mainNodes,
  FooterNodes: footerNodes,
})

html, err := ui.RenderHTML(node)

In .gx source, write the document frame as markup and keep the Go API example as the render-boundary helper.

.gx source

package shellui

import gx "github.com/busdk/bus-gx/pkg/gx"

type AccountingDocumentProps struct {
  Title string
}

func AccountingDocument(props AccountingDocumentProps) gx.Node {
  return <html lang="en">
  <head>
    <title><Text value={props.Title}></Text></title>
  </head>
  <body>
    <div class="app-shell">
      <nav aria-label="Primary">
        <a href="/accounting/index.html"><Text value={"Overview"}></Text></a>
      </nav>
      <main>
        <h1><Text value={props.Title}></Text></h1>
        <p><Text value={"Review imported files and evidence."}></Text></p>
      </main>
      <footer><small><Text value={"Bus UI"}></Text></small></footer>
    </div>
  </body>
</html>
}

var accounting = <AccountingDocument title={"Accounting"}></AccountingDocument>

Use the tag form when the page source should show the document shell directly.