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

Vertical Tab

Overview

• The DynamicVerticalTabComponent displays a vertical tab with a header and a content area.
• It renders configured components inside the tab when it is shown.
• It arranges its elements horizontally or vertically based on the selected layout.
• It can show an optional icon next to the tab name.

Specs

Tokens

Structure

• Represents a single vertical tab with a header and a content panel.

• Renders its child components only when the tab is shown.

• Supports flexible composition of child content (e.g., forms, fields, images, other UI elements).

• elements – Contains all components to be rendered within this vertical tab when it is shown. This array can include any dynamic components like forms, fields, images, or other UI elements that form the content of the vertical tab.

(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, "userSettingsTab" enables targeted manipulation of this specific vertical tab panel through actions or events.

(Configured in Visual Properties)

• layout – Defines the layout arrangement of elements within the vertical tab. Options include "horizontal" (elements arranged side by side) or "vertical" (elements stacked on top of each other). For example, using "vertical" layout provides a clean presentation for form fields in a vertical tab.

Styling

(Configured in Visual Properties)

• name – Defines the header text displayed for the vertical tab. It represents the visible label that users click to expand or collapse the item.
• nameTranslations – Sets the title text displayed in the vertical tab header with support for multiple languages. For example, {"en-US": "Product Specifications", "de-DE": "Produktspezifikationen"} ensures proper localization of the header text.
• 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.

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 Visual Properties)

• disabled – Controls whether the vertical tab can be expanded or collapsed. When set to true, the tab appears grayed out and cannot be clicked.

Tests

(Configured in Testing Hooks)

• dataTestId – Sets the testing hook ID for automated testing. For example, setting it to "settings-tab" allows test scripts to reliably locate this specific component.
• enableAsHotspot — Enables the component as a guided tour hotspot. When enabled, the vertical tab can be highlighted during guided tours of your application.

Links

• Figma: tba
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/other-components/vertical-tab-panel

Guidelines

Usage

• Prefer concise, action-oriented header labels across locales using nameTranslations.
• Add an icon only when it aids recognition (not as the sole cue) by enabling showIcon and setting iconName.
• Prevent interaction when prerequisites aren’t met by setting disabled: true.

Sizing & Layout

• Arrange internal content using layout:
• layout: "vertical" for forms/lists or sequential reading.
• layout: "horizontal" for short, side-by-side atoms.
• Populate child UI in elements; only the active (shown) tab mounts these children.

Content & Localization

• Provide concise, localized headers via nameTranslations; keep name in sync during authoring.
• Icons are supplemental; maintain a text label with name/nameTranslations even when showIcon is on.

Dos & Don’ts

Accessibility

• Localizable header text: nameTranslations, name. Keep header copy brief and plain-language in each locale.
• Text label always present (icon is supplemental): showIcon, iconName, name/nameTranslations.
• Prevent unavailable interactions: disabled.
• Prefer stacked reading order for sequential inputs: layout: "vertical".
• Use displayName to aid authorship clarity without altering user-facing labels: displayName.