Versions Compared

Old Version 2

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

Saved on

compared with

New Version Current

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.
  • Figma: tba
  • Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/other-components/tab-panel

Guidelines

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.

...

events.ON_INIT, setActiveTab
DoDon’tArticle setting(s)
Set a deliberate default tab on mount.Rely on whichever tab happens to be first.
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

...

  • 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.