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

Vertical Tab Panel

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.

Specs

Tokens

Structure

(Configured in General Properties)

• displayName – Sets the display name of the component shown in the structure panel. For example, "Settings Panel" allows for easy identification of the tab panel's purpose in the component structure.
• id – Specifies a unique identifier for the component used for programmatic access. For example, "userSettingsTabPanel" enables targeted manipulation of this specific vertical tab panel through actions or events.

(Configured in Visual Properties)

• elements – Defines the tabs and footer contained within this panel. This array contains DynamicVerticalTabComponent objects for tabs and optionally a DynamicVerticalTabPanelFooterComponent for footer content.

Tab Configuration

Each tab in the elements array has several properties:

• showIcon – Controls whether an icon is displayed next to the tab name. When enabled, shows the icon specified by the iconName property.
• iconName – Specifies which icon to display when showIcon is true. For example, "user" displays a user icon next to the tab label, providing visual cues about the tab's content.

Footer Configuration

The panel can include a footer section that remains visible regardless of which tab is selected:

• DynamicVerticalTabPanelFooterComponent – A special component that can be included in the panel's elements to create a persistent footer area. This is commonly used for action buttons like "Save", "Cancel", or other controls that apply to all tabs.

Styling

(Configured in Tab Configuration)

• tabNameTranslations – Sets the text displayed on the tab label with support for multiple languages. For example, {"en-US": "Personal Information", "de-DE": "Persönliche Informationen"} provides localized tab names.

(Configured in Visual Properties)

• paddingClass – Configures internal spacing around the tab panel using CSS class naming. For example, "p-4" adds medium padding on all sides, while "pt-2 pb-4" adds small padding at the top and larger padding at the bottom.

Actions & Variants

(Configured in Events)

• events – Configures the events that the component can trigger and respond to.
• ON_INIT – Triggered when the vertical tab panel component is initialized. Can be used to perform setup operations like loading initial data.
• ON_DESTROY – Triggered when the vertical tab panel component is removed from the DOM. Useful for cleanup operations when navigating away from a page.

(Configured in Testing Hooks)

• 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":"profileTabId"} will switch to the tab with that ID.

Variants

• disabled – Determines whether the tab can be selected by users. When set to true, the tab appears grayed out and cannot be clicked, useful for indicating content that is temporarily unavailable.

Tests

(Configured in Testing Hooks)

• dataTestId – Sets the testing hook ID for automated testing. For example, setting it to "settings-tab-panel" allows test scripts to reliably locate this specific component.

Authorization

(Configured in Visual Properties)

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

Links

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

Sizing & Layout

• Apply internal spacing with paddingClass so content isn’t flush to edges.
• Order tabs via the sequence of elements to match the intended workflow.
• Use displayName to label the panel for authors (structure view only).

States & Feedback

• Mark unavailable tabs with disabled: true so they cannot be selected.

Data-Driven / Conditional Behavior

• Use per-tab disabled for data-dependent availability and setActiveTab for data-driven navigation where appropriate (avoid repeated flips during load).

Visibility & Authorization

• Gate the entire panel with visibilityPolicySetId when access must be restricted.
• Keep test targeting stable regardless of visibility with dataTestId.

Content & Localization

• Localize every tab label using tabNameTranslations; keep labels short and specific.
• When helpful, add an icon next to a label using showIcon + iconName; do not replace the text label.

Dos & Don’ts

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)