Bus UI Shells

SplitLayout gives panes a shared structure.

Use SplitLayout for list/detail, left/right, or workspace panes that need typed content slots and deterministic resize state.

Public API

Function	`ui.SplitLayout`
Props	`ui.SplitLayoutProps`
State	`ui.SplitLayoutState`, `ui.NewDefaultSplitLayoutState`

Example

Loading SplitLayout demo...

Go API

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

node, err := ui.SplitLayout(ui.SplitLayoutProps{
  Orientation: ui.SplitLayoutHorizontal,
  Left: ui.SplitLayoutPaneProps{
    Label: "Files",
    Nodes: []gx.Node{gx.Element("p", nil, gx.Text("3 imports waiting"))},
  },
  Right: ui.SplitLayoutPaneProps{
    Label: "Detail",
    Nodes: []gx.Node{gx.Element("p", nil, gx.Text("Receipt 1024"))},
  },
})

.gx source

package shellui

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

func ReviewSplit() gx.Node {
  return <section class="bus-ui-split-layout" data-ui-layout="split">
    <section aria-label="Files"><Text value={"3 imports waiting"}></Text></section>
    <section aria-label="Detail"><Text value={"Receipt 1024"}></Text></section>
  </section>
}