Bus UI Components

Shared structure for product surfaces.

These family pages explain the public component APIs one layer at a time. The shared components build gx.Node trees, validate before render, and use the public package paths shown on each component page.

Family pages

Family	Use it for	Page
Shells	Application frames, module pages, sidebar layouts, and shell action panels.	Shells
Navigation	Menus, tabs, and generic navigation rails.	Navigation
Actions	Buttons, button links, icon buttons, and action bars.	Action
Surfaces	Panels, surface cards, and metric cards.	Surface
Status	Status pills, empty states, loading states, result panels, and error banners.	Status

Example

The shell family exports through pkg/ui. Compose the page frame with typed node trees first, then render at the page boundary.

Go API

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

headerNodes := []gx.Node{
  gx.Element("h1", nil, gx.Text("Accounting")),
}

mainNodes := []gx.Node{
  gx.Element("p", nil, gx.Text("Module content")),
}

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

In .gx source, the same package can expose that composed node tree as an uppercase component tag.

In .gx source, author the component catalog as nested markup and pass data through lower-camel component attributes.

.gx source

package componentsui

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

type ComponentCatalogProps struct {
  Title string
}

func ComponentCatalog(props ComponentCatalogProps) gx.Node {
  return <section class="component-catalog">
  <h2><Text value={props.Title}></Text></h2>
  <p><Text value={"Shells, navigation, actions, surfaces, and status pieces share one markup tree."}></Text></p>
  <nav aria-label="Component families">
    <a href="shell/index.html"><Text value={"Shells"}></Text></a>
    <a href="navigation/index.html"><Text value={"Navigation"}></Text></a>
    <a href="action/index.html"><Text value={"Actions"}></Text></a>
  </nav>
</section>
}

var catalog = <ComponentCatalog title={"Bus UI components"}></ComponentCatalog>