(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
| Token |
Description |
| displayName |
Display name in structure panel |
| id |
Unique identifier for programmatic access |
| dataTestId |
Testing hook ID |
| elements |
Array of tabs and optional footer |
| DynamicVerticalTabComponent |
Tab item type within elements |
| DynamicVerticalTabPanelFooterComponent |
Persistent footer component within elements |
| tabNameTranslations |
Localized tab label text |
| disabled |
Disables tab selection |
| showIcon |
Toggles icon next to tab name |
| iconName |
Icon name used when showIcon is true |
| paddingClass |
CSS spacing inside panel |
| visibilityPolicySetId |
Visibility controlled by policy sets |
| events |
Configurable component events |
| ON_INIT |
Event fired on component initialization |
| ON_DESTROY |
Event fired on component removal |
| setActiveTab |
Method to activate a tab by its ID |
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.
Guidelines
Accessibility