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
name: orderTabs
props:
  defaultTab: general
  header:
    icon:
      - component: avatar
        name: orderAvatar
        props:
          name: "{{ order.orderNumber }}"
    title:
      - component: text
        name: orderTitle
        props:
          type: h5
          value: "{{ order.orderNumber }}"
    subTitle:
      - component: text
        name: orderSubtitle
        props:
          value: "{{ order.customer.name }}"
    buttons:
      - component: button
        name: editOrder
        props:
          label: { en-US: "Edit" }
          permission: Orders/Update
  toolbar:
    - component: button
      name: refreshOrder
      props:
        label: { en-US: "Refresh" }
        icon: refresh-cw
children:
  - component: tab
    name: general
    props:
      label: { en-US: "General" }
    children:
      - component: text
        props:
          value: "Hello World"
  - component: tab
    name: notes
    props:
      label: { en-US: "Notes" }
    children:
      - component: text
        props:
          value: "Hello World"

Props​

  • header: Optional icon, title, subTitle, and buttons areas rendered above the tab strip. Each area is a list of components. Hidden children (isHidden, isVisible, permission) are left out, and an area with nothing visible is not rendered; if no area has anything visible, the header is not rendered at all. On narrow screens the buttons wrap below the title.
  • toolbar: A list of components rendered at the end of the tab strip.
  • defaultTab: Name of the tab to open when the URL has no tab param. The first visible tab is used when the name is missing or unknown.
  • useNavigationForTabs: Push tab changes into history instead of replacing the current entry.
  • layout: cards (default) or classic. See Content card.

Each child is a tab with a localized label, an optional icon shown before the label (info, an old scaffold default, is ignored), optional isVisible/isHidden expressions, and an optional contentCard (see Content card).

Content card​

With the default layout: cards, the header and tab strip sit on one card and the active tab's content renders on its own card, 20px below.

Content that draws its own frame — a dataGrid, which always renders its own card, or a card — would end up as a card inside a card. Such a tab sets contentCard: false; its content then renders without the content card, and the YAML decides how it is framed (for example by wrapping it in a card component).

component: tabs
name: orderTabs
children:
  - component: tab
    name: details
    props:
      label: { en-US: Details }        # content card (default)
    children:
      - component: Orders/Details
  - component: tab
    name: attachments
    props:
      label: { en-US: Attachments }
      contentCard: false               # the grid draws its own card
    children:
      - component: Orders/Attachments

layout: classic keeps the original layout for the whole tabs component: header, tab strip and content in one card. Per-tab contentCard has no effect with classic.

component: tabs
name: orderTabs
props:
  layout: classic

The content card applies to web; mobile renders tab content without cards.

Platform behavior​

  • Web: Tabs are horizontally scrollable. URL parameter changes, including browser Back, update the active tab without bouncing back to a stale selection.
  • Mobile: A compact selector is used on narrow screens or when tabs overflow. Tab icons also appear in overflow menus, and the shared header renders above both tab modes.

Manual Navigation​

The active tab is kept in the tabs_<name>_ix URL param, the zero-based index among the visible tabs. Use the setParams action to switch tabs. For tabs named myTabs:

component: tabs
name: myTabs
props:
  toolbar:
    - component: button
      name: goToFirst
      props:
        label: { en-US: "First tab" }
        onClick:
          - setParams:
              tabs_myTabs_ix: 0
    - component: button
      name: goToSecond
      props:
        label: { en-US: "Second tab" }
        onClick:
          - setParams:
              tabs_myTabs_ix: 1

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.