Versions Compared

Old Version 1

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.

...

  • 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

[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)
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.
  • Improve reading comfort using paddingClass and an appropriate layout.
  • Remove ineligible content from view by gating the panel with visibilityPolicySetId.