You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

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

Tab panel

Overview

  • The tab panel organizes content into multiple tabs on a single page.
  • It lets users switch between different views without leaving the page.
  • It provides an intuitive way to group related content while saving screen real estate.
  • Each tab is a DynamicTabComponent with its own content.

Example Tab Panel

Specs

Tokens

Token Description
displayName Display name in structure panel
elements Tabs contained in the panel
paddingClass Internal spacing via CSS classes
visibilityPolicySetId Visibility based on policy set
layout Child arrangement: vertical or horizontal
events Configurable component events
ON_INIT (Events) Fired on initialization
ON_DESTROY (Events) Fired on component removal
setActiveTab Method to activate a tab

Structure

(Configured in General Properties)

  • displayName — Sets the display name of the component shown in the structure panel. For example, "ProductDetailsTabs" allows for easy identification of the tab panel's purpose in the component structure.

(Configured in Visual Properties)

  • elements — Defines the tabs contained within this panel. This array contains DynamicTabComponent objects that represent individual tabs with their own content. Each tab needs at minimum a tabNameTranslations property and can contain nested components.
  • layout — Determines how child elements are arranged within the tab panel. Options include "vertical" or "horizontal". For example, "vertical" stacks elements within each tab vertically.

(Configured in Visibility)

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

Styling

(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 tab panel component is initialized. Can be used to perform setup operations like loading initial data.
  • ON_DESTROY — Triggered when the tab panel component is removed from the DOM. Useful for cleanup operations when navigating away from a page.

(Configured in Component Methods)

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

Guidelines

[NO DATA AVAILABLE]

Accessibility

[NO DATA AVAILABLE]

  • No labels