Skip to main content

Tabs Component

Purpose​

Tabs Component is a component that wraps child components into a set of tabs.

Tabs can also contain a slot child. On web, the renderer resolves that slot and expands each registered extension layout into a tab at the slot's position. Extensions are ordered by props.order; the slot itself does not produce an empty or unlabeled tab.

Example​

component: tabs
children:
  - component: tab
    props:
      label: Tab 1
    children:
      - component: text
        props:
          value: "Hello World"
  - component: tab
    props:
      label: Tab 2
    children:
      - component: text
        props:
          value: "Hello World"

Props​

  • toolbar: The toolbar of the tabs. It accepts a component.
  • header: Optional icon, title, subTitle, and buttons areas above the tab strip. Each accepts an array of components.
  • useNavigationForTabs: Push tab changes into history instead of replacing the current entry.

Manual Navigation​

Tabs can be navigated manually using the setParams action. Tab name + Ix is used to set the active tab. Example: myTabsIx. Index starts from 0.

component: tabs
name: myTabs
props:
  toolbar:
    component: toolbar
    name: myToolbar
    children:
      - component: button
        props:
          label: "Tab 1"
          onClick:
            - setParams:
                myToolbarIx: 1
      - component: button
        props:
          label: "Tab 2"
          onClick:
            - setParams:
                myToolbarIx: 2

Extensible Tabs with Slots​

component: tabs
name: shipmentTabs
children:
  - component: tab
    props:
      label: Summary
  - component: slot
    props:
      name: TMS/ShipmentDashboard/Tabs

An extension component targeting TMS/ShipmentDashboard/Tabs must provide a tab layout. Its slot name may use template expressions; the renderer resolves them against the tab variables and component store before loading extensions.