Versions Compared

Old Version 4

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)

Vertical Tab Panel

Link to Figma: tba

Overview

  • The Vertical Tab Panel is a container component with vertically arranged tabs.
  • It provides a navigation interface for grouping related content.
  • Tabs are displayed along the left side of the panel.
  • It supports complex forms and applications with multiple sections.
  • The layout is clean and structured to keep content organized.

...

  • visibilityPolicySetId – Determines the visibility of the component based on policy sets. For example, setting to "adminOnlyPolicy" ensures the tab panel only appears for users with admin privileges.
  • Figma: tba
  • Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/other-components/vertical-tab-panel

Guidelines

Usage

  • Use the Vertical Tab Panel to group related sections by defining tabs in elements (DynamicVerticalTabComponent) and, if needed, a persistent footer via DynamicVerticalTabPanelFooterComponent.
  • Place actions that apply to all tabs (e.g., Save/Cancel) in the persistent footer, not inside individual tabs.

...

DoDon’tArticle setting(s)
Define only the tabs you need and in the order users expect.Add many loosely related tabs or randomize the order.elements
Localize each tab label.Ship English-only labels.tabNameTranslations
Use an icon to reinforce meaning with text.Replace the tab label with an icon alone.showIcon, iconName, tabNameTranslations
Disable tabs that aren’t available yet.Let users navigate into non-functional tabs.disabled
Put cross-tab actions in the persistent footer.Duplicate the same action inside every tab.DynamicVerticalTabPanelFooterComponent, elements
Set the initial tab once on init.Switch tabs multiple times during load.ON_INIT, setActiveTab
Add internal padding for readable content.Leave content flush to panel edges.paddingClass
Gate the entire panel by policy when needed.Show the panel to all users and rely on downstream errors.visibilityPolicySetIdAdd stable automation hooks.Target by visible text that may change.dataTestId, id

Accessibility

  • Provide localized, concise tab labels announced clearly by assistive tech. (tabNameTranslations)
    • Keep labels short and unambiguous across locales. (tabNameTranslations)
  • Prevent interaction with unavailable content by disabling tabs. (disabled)
  • Support recognition by pairing text labels with optional icons (never icon-only). (showIcon, iconName)
  • Ensure stable automation and a11y checks via deterministic hooks. (dataTestId)
  • Hide the entire panel when access is denied to avoid dead-ends. (visibilityPolicySetId)
  • Improve readability by applying appropriate internal spacing. (paddingClass)