Versions Compared

Old Version 1

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version 2

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Tab panel

Link to Figma: tba

Overview

  • The tab panel organizes content into multiple tabs on a single page.
  • It lets users switch between different views without leaving the page.
  • It provides an intuitive way to group related content while saving screen real estate.
  • Each tab is a DynamicTabComponent with its own content.

...

  • setActiveTab — Programmatically activates a specific tab by its ID. This action accepts a parameter with the key of the tab to activate. For example, calling setActiveTab with {"key":"detailsTabId"} will switch to the tab with that ID.

Guidelines

[NO DATA AVAILABLE]

Accessibility

...

Usage

  • Group related views into switchable tabs by adding each view as an entry in elements (each entry is a DynamicTabComponent).
  • Set an author-friendly internal name with displayName (e.g., “ProductDetailsTabs”).
  • Hide the entire panel for restricted audiences using visibilityPolicySetId.

Sizing & Layout

  • Add internal spacing with paddingClass.
  • Arrange content within each tab using layout: "vertical" for stacked flows or "horizontal" for side-by-side items.
  • Keep the number of tabs focused by curating elements.
  • Order tabs by importance by arranging the elements array accordingly.

States & Feedback

  • Select or change the active tab programmatically via setActiveTab.

Visibility & Authorization

  • Show or hide the entire tab panel using visibilityPolicySetId.

Content & Localization

  • Provide user-facing tab labels via each tab’s tabNameTranslations inside elements.
  • Keep labels short and scannable; reserve displayName for authoring only.

Dos & Don’st

DoDon’tArticle setting(s)
Set a deliberate default tab on mount.Rely on whichever tab happens to be first.events.ON_INIT, setActiveTab
Keep tab labels short and localized.Use long sentences or English-only labels.elements (per-tab tabNameTranslations)
Add only necessary tabs and split topics clearly.Stuff unrelated content into one tab.elements
Order tabs by importance/task flow.Leave tabs in arbitrary creation order.elements
Add internal spacing for readability.Let content touch the panel edges.paddingClass
Arrange tab content with layout for readability.Force dense side-by-side layouts for long text.layout
Gate the entire panel by audience.Show the panel and rely on empty/disabled inner content.visibilityPolicySetId
Clean up on removal.Leave timers/listeners running after navigation.events.ON_DESTROY

Accessibility

  • Localize tab labels using each tab’s tabNameTranslations inside elements.
    • Keep tabNameTranslations short, plain-language, and avoid emoji-only labels.
    • Ensure all tabs include tabNameTranslations for every supported locale.
  • Provide a predictable navigation order by arranging the elements array and selecting the initial tab with setActiveTab during ON_INIT.
  • Improve reading comfort using paddingClass and an appropriate layout.
  • Remove ineligible content from view by gating the panel with visibilityPolicySetId.