Skip to content
Proto UI

Search

Loading search…
Toggle theme

Tabs

Base Tabs selection, anatomy, focus ownership, evidence, and current boundaries.

Base Tabs is a compound single-selection protocol. Root owns the selected value; List owns roving focus; Trigger requests selection; Content projects the current panel; Indicator only reflects context for downstream visual treatment.

选择适配器 Web Components React Vue Vue 2

Family and ownership

Section titled “Family and ownership”

The canonical family is:

  • Root 1..1
  • List 0..1
  • Trigger 0..*
  • Content 0..*
  • Indicator 0..*

Root accepts value, defaultValue, orientation, and activationMode, and emits valueChange. A controlled Root treats selection as a request until the owner provides a new value. List adds loop, optional a11yLabel, orientation-aware arrow navigation, Home/End, and focus methods. Trigger owns its value, disabled gate, interaction facts, focus request, selected projection, and tab accessibility. Content matches its value, exposes current/hidden, and can retain an inactive host view with keepMounted.

Indicator is a presentational context consumer. It exposes current value, active value, and orientation, but owns no selection, event route, focus target, measurement, positioning, or visual variant.

Accessibility and presence

Section titled “Accessibility and presence”

The Web profile projects tablist, tab, and tabpanel relationships. Disabled triggers remain outside selection. Automatic activation selects while focus moves; manual activation keeps focus navigation and selection separate. Inactive Content detaches by default; keepMounted preserves the complete host view while accessibility-hidden.

0.2 delivery and evidence

Section titled “0.2 delivery and evidence”

The stable 0.2.0 package exports all five authoring surfaces from @proto.ui/prototypes-base/tabs. The current base-tabs CLI facade generates Root, List, Trigger, and Content; Indicator remains a public package authoring surface but is not included in that generated facade. The mapped T-BASE-TABS-* entities cover packages/prototypes/base/test/tabs.test.ts, and this preview exercises the family through all three Web adapters.

Lifecycle

Section titled “Lifecycle”

The five P-BASE-TABS* entities are draft. Current implementation and evidence are reviewable working surfaces, not a frozen compatibility promise.

References

Section titled “References”