Dynamic Vertical Tab Panel Footer User Manual

The Dynamic Vertical Tab Panel Footer component is a flexible footer area for vertical tab panels. It supports dynamic content, custom layouts, and interactive elements, making it ideal for displaying actions, status messages, or additional controls at the bottom of a tab panel.

  • elements
    Defines the child dynamic elements rendered in the footer. You can add buttons, text, or any supported dynamic component.
    Example: 
  [
    { "type": "DynamicButtonComponent", "props": { "label": "Save" } },
    { "type": "DynamicTextComponent", "props": { "text": "All changes saved." } }
  ]

  • layout
    Sets the layout direction for footer elements. Use "vertical" to stack elements or "horizontal" to arrange them side by side.
    Example:
    layout: "vertical" will stack all footer elements.

  • paddingClass
    Applies CSS padding classes to the footer for spacing.
    Example:
    paddingClass: "p-3" adds medium padding.

  • displayName
    Sets the display name of the footer, shown in the structure panel.
    Example:
    displayName: "Tab Footer"

  • id
    Specifies a unique identifier for the footer component.
    Example:
    id: "tabFooter1"

  • dataTestId
    Sets a testing hook ID for automated tests.
    Example:
    dataTestId: "upw-vertical-tab-footer"

  • enableAsHotspot
    Enables the footer as a guided tour hotspot. Useful for onboarding or highlighting features.
    Example:
    enableAsHotspot: true

  • guidedTourHotSpotTitle
    Sets the title for the guided tour hotspot, supporting translations.
    Example:
    guidedTourHotSpotTitle: { "en-US": "Footer Actions" }

  • guidedTourHotSpotDescription
    Sets the description for the guided tour hotspot, supporting translations.
    Example:
    guidedTourHotSpotDescription: { "en-US": "Use these buttons to save or cancel changes." }

The footer typically displays an array of elements, such as buttons and text.
Example data:

{
  "elements": [
    { "type": "DynamicButtonComponent", "props": { "label": "Save" } },
    { "type": "DynamicButtonComponent", "props": { "label": "Cancel" } },
    { "type": "DynamicTextComponent", "props": { "text": "All changes saved." } }
  ],
  "displayName": "Tab Footer",
  "layout": "horizontal",
  "dataTestId": "upw-vertical-tab-footer"
}
  • elements
  • layout
  • paddingClass
  • displayName
  • id
  • dataTestId
  • enableAsHotspot
  • guidedTourHotSpotTitle
  • guidedTourHotSpotDescription

This manual provides a structured overview of the Dynamic Vertical Tab Panel Footer component (v2), with each property explained, categorized, and accompanied by usage examples.

  • No labels