Bus UI Shells

ShellActionPanel keeps shell actions bounded.

Use ShellActionPanel for a shell-level panel with a required title, typed body nodes, validated controls, and optional footer content.

Public API

Function	`ui.ShellActionPanel`
Props	`ui.ShellActionPanelProps`
Control props	`ui.ShellActionPanelControl`
Use for	Validated shell panels that include actions beside descriptive content.

Example

Loading ShellActionPanel demo...

Go API

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

node := ui.ShellActionPanel(ui.ShellActionPanelProps{
  Title: "Review import",
  Body: []gx.Node{
    gx.Element("p", nil, gx.Text("Validate the imported evidence before posting.")),
  },
  Actions: []ui.ShellActionPanelControl{{
    Label: "Approve",
    Control: ui.ControlProps{Action: "approve-import"},
  }},
})

html, err := gx.RenderHTML(node)

In .gx source, direct node-returning shell helpers can be wrapped without an error branch.

In .gx source, the action panel is sidebar markup with command controls nested inside it.

.gx source

package shellui

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

type ReviewActionsProps struct {
  Title string
}

func ReviewActions(props ReviewActionsProps) gx.Node {
  return <aside class="shell-action-panel">
  <h2><Text value={props.Title}></Text></h2>
  <button type="button"><Text value={"Approve"}></Text></button>
</aside>
}

var actions = <ReviewActions title={"Review actions"}></ReviewActions>