tabs

package

v0.3.0 Latest Latest Go to latest Published: Jun 8, 2026 License: MIT Imports: 5 Imported by: 0

Details

Valid go.mod file
Redistributable license
Tagged version
Stable version
Learn more about best practices

Repository

github.com/DonaldMurillo/gofastr

Links

Open Source Insights

Documentation ¶

Overview ¶

Package tabs provides a tabbed-content layout with zero JavaScript.

Implementation: each tab is a <details> sharing a name= attribute (so opening one closes the others — native exclusivity). CSS Grid then arranges the summaries in row 1 and panels in row 2 spanning the full width, producing the visual shape of a tab strip.

Trade-off: assistive tech announces the widget as a disclosure, not an ARIA tablist. We chose this over a JS-driven tablist because:

Zero JavaScript, zero CSP complications.
The disclosure pattern is honest about what's happening — there is no tab/panel separation, only "show one, hide others".
Native keyboard support (Tab between summaries, Enter/Space activates, focus is automatic).

If you need full WAI-ARIA tablist semantics (arrow-key tab cycling, activation modes), build a custom widget on top of core-ui/widget instead.

Index ¶

Variables
func New(cfg Config, tabs ...Tab) render.HTML
type Config
type Tab

Constants ¶

This section is empty.

Variables ¶

View Source

var Style = registry.RegisterStyle("tabs", styleFn)

Style is the registered stylesheet handle. New's wrapping <div> goes through Style.WrapHTML so the data-fui-comp marker is emitted and the runtime auto-loads the CSS on first appearance.

Functions ¶

func New ¶

func New(cfg Config, tabs ...Tab) render.HTML

New renders a tabset.

Output structure (panels live in a sibling container so the strip and the panel area are separate flex children of `.tabs` — needed because `display: contents` does not propagate flex `order` reliably in Chrome, which broke the strip-then-panel layout when both lived inside `<details>`):

<div class="tabs">
  <details name="X"><summary>A</summary></details>
  <details name="X"><summary>B</summary></details>
  <div class="tabs-panels">
    <div class="tabs-panel" data-for="…">A content</div>
    <div class="tabs-panel" data-for="…">B content</div>
  </div>
</div>

Panel visibility is driven by `:has(> details:nth-child(N)[open])` rules in BaseCSS — pure CSS, no JS.

Types ¶

type Config ¶

type Config struct {
	// Name groups the tabs as a single exclusive set. Required.
	// Must be unique within the page.
	Name string

	Label string // optional aria-label for the wrapper
	Class string
	ID    string
}

Config configures the tabset.

type Tab ¶

type Tab struct {
	Label   string      // required — visible tab summary text
	Content render.HTML // required — panel content
	Open    bool        // initially active
	ID      string
}

Tab is one entry in a tabset.

Source Files ¶

View all Source files

tabs.go

?	: This menu
/	: Search site
f or F	: Jump to
y or Y	: Canonical URL