tabbutton

Documentation

Overview

Package tabbutton provides the w-tabbutton custom element for wings.

w-tabbutton is a strictly passive leaf — and that passivity is load-bearing. In accordion mode the parent <w-tabs> physically MOVES this element into the matching <w-tab> (so it becomes the native <summary>). A DOM move fires disconnectedCallback, which the framework treats destructively (it deletes the node's reactive state — see prana.go elementDisconnected). Because this widget owns no JS-side state, runs no Render logic, and drives its visuals purely through CSS attribute selectors (:host([active]) / :host([mode=…])), it keeps working after the move: the shadow root and CSS persist on the element, and clicks still bubble to <w-tabs> via event delegation. Do NOT add data binding or Render behaviour here without revisiting the move.

The inner element is a <span>, not a <button>: a real button inside a <summary> swallows the activation and blocks the native <details> toggle. <w-tabs> supplies keyboard activation and a roving tabindex on the host.

Attributes

• tid (optional) — string identifier for programmatic/deep-link activation. Pairing of button↔panel is by DOM adjacency (the next <w-tab> sibling), so tid is no longer required for basic operation.
• active (boolean) — present when this is the active tab. Set/cleared by the parent <w-tabs>; the webdev may write it on the initial markup to choose which tab starts active.
• mode (managed) — stamped by <w-tabs> (panel/menu/detached/accordion) to select the per-mode CSS. Webdevs do not write it.

Example (co-located with its panel, direct children of <w-tabs>)

<w-tabbutton active>Overview</w-tabbutton>
<w-tab>…</w-tab>

Index

• Variables
• type TabButton
  • func New() *TabButton
  • func (b *TabButton) InitData() map[string]any
  • func (b *TabButton) ListCSS() []wings.CSSPart
  • func (b *TabButton) Render(obj *wings.PranaObj)
  • func (b *TabButton) ReplaceCSS(key string, content string)

Variables

var G goose.Alert

G is the logger for this module.

Types

type TabButton

type TabButton struct{}

TabButton implements wings.PranaMod and wings.Customizable for the w-tabbutton custom element.

func New

func New() *TabButton

New creates a new TabButton instance.

func (*TabButton) InitData

func (b *TabButton) InitData() map[string]any

func (*TabButton) ListCSS

func (b *TabButton) ListCSS() []wings.CSSPart

func (*TabButton) Render

func (b *TabButton) Render(obj *wings.PranaObj)

Render is intentionally empty — the parent <w-tabs> drives the active state via setAttribute, and the click event bubbles naturally.

func (*TabButton) ReplaceCSS

func (b *TabButton) ReplaceCSS(key string, content string)