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

Tab panel

Tab Panel is a container component that organizes content into multiple tabs, allowing users to switch between different views without navigating away from the page. It provides an intuitive interface for grouping related content while saving screen real estate.

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.

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.

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

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

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

Event Actions

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

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