Tabs switch between sibling module views.

Public API

Function	ui.Tabs
Props	ui.TabsProps
Item props	ui.TabItem
Use for	Sibling views with stable active tab ids and validated targets.

Example

Go API

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

node, err := ui.Tabs(ui.TabsProps{
  Label:  "Accounting views",
  Active: "files",
  Items: []ui.TabItem{
    {ID: "overview", Label: "Overview", Href: "../index.html"},
    {ID: "files", Label: "Files", Href: "../files/index.html"},
  },
})

html, err := gx.RenderHTML(node)

In .gx source, wrap the tab configuration in a package-scope component and pass scalar values through lower-camel attributes.

In .gx source, tabs are authored as linked views and can be wrapped in a local component.

.gx source

package navigationui

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

type ReportTabsProps struct {
  Active string
}

func ReportTabs(props ReportTabsProps) gx.Node {
  return <nav class="tabs" aria-label="Report views">
  <a aria-current="page" href="/reports/summary.html"><Text value={props.Active}></Text></a>
  <a href="/reports/events.html"><Text value={"Events"}></Text></a>
</nav>
}

var tabs = <ReportTabs active={"Summary"}></ReportTabs>