EventBar groups related actions.

Public API

Function	ui.EventBar
Props	ui.EventBarProps
Render boundary	Render the returned node with gx.RenderHTML when HTML is needed.
Use for	Dense rows of action controls inside headers or panels.

Example

Go API

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

node, err := ui.EventBar(ui.EventBarProps{
  Label: "File actions",
  Actions: []ui.EventBarAction{{
    Label: "Import",
    Control: ui.ControlProps{Action: "import-file"},
  }},
})
if err != nil {
  return err
}

html, err := gx.RenderHTML(node)

In .gx source, keep the event-bar construction in a package-scope wrapper so the tag stays declarative.

In .gx source, describe the event bar as live markup with the action text passed through props.

.gx source

package actionsui

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

type EventBarProps struct {
  Status string
  Action string
}

func EventBar(props EventBarProps) gx.Node {
  return <section class="event-bar" aria-live="polite">
  <p><Text value={props.Status}></Text></p>
  <button type="button"><Text value={props.Action}></Text></button>
</section>
}

var importEvent = <EventBar status={"Import completed"} action={"Open log"}></EventBar>