Bus UI Shells

PageShell frames content inside an existing document.

Use PageShell when the host already owns the document and the module needs a validated header, main region, and optional footer. The shell composes typed gx.Node trees before the HTML boundary.

Validated API

Function	`ui.PageShell`
Props	`ui.PageShellProps`
Use for	Module-local page frames composed from typed GX nodes.

Example

Loading PageShell demo...

Go API

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

node, err := ui.PageShell(ui.PageShellProps{
  HeaderNodes: []gx.Node{
    gx.Element("h1", nil, gx.Text("Files")),
  },
  MainNodes: []gx.Node{
    gx.Element("section", nil, gx.Text("Uploaded accounting files")),
  },
  FooterNodes: []gx.Node{
    gx.Element("small", nil, gx.Text("Last import finished")),
  },
})

html, err := gx.RenderHTML(node)

In .gx source, keep the shell slots inside a wrapper component and call it with lower-camel attributes.

In .gx source, author the page shell as structural markup with title and body slots visible in the tree.

.gx source

package shellui

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

type PageShellViewProps struct {
  Title string
}

func PageShellView(props PageShellViewProps) gx.Node {
  return <section class="page-shell">
  <header><h1><Text value={props.Title}></Text></h1></header>
  <main><p><Text value={"Review imports and attached evidence."}></Text></p></main>
</section>
}

var page = <PageShellView title={"Accounting"}></PageShellView>