Skip to main content
A container card that presents its child cards as selectable tabs. Each child card becomes a tab, allowing users to switch between different views or sections of content. The tabs component supports smooth transitions and optional sticky positioning.

​
Type

type: "tabs"

​
Properties

​
Required Properties

None

​
Optional Properties

PropertyTypeDescriptionDefault
tabsStickybooleanIf true, the tab strip will stick to the top when scrollingfalse

​
Layout

  • Default Width: 12 columns
  • Default Height: 10 rows
  • Supports Children: Yes (required - children become tabs)

​
Configuration Example

- type: tabs
  id: myTabs
  properties:
    tabsSticky: true
  layout:
    x: 0
    y: 0
    w: 12
    h: 10
  children:
    - type: cardPanel
      id: tab1
      properties:
        title: "General Info"
        icon: "user"
      layout:
        x: 0
        y: 0
        w: 12
        h: 9
    - type: cardPanel
      id: tab2
      properties:
        title: "Address"
        icon: "map-pin"
      layout:
        x: 0
        y: 0
        w: 12
        h: 9

​
Advanced Usage

​
Tab Naming and Icons

Each child card’s title property is used as the tab name. If no title is provided, the card’s type is used as a fallback. You can also specify an icon property on child cards to display an icon in the tab. 
- type: tabs
  id: dataTabs
  children:
    - type: dataStoreGrid
      id: customersTab
      properties:
        title: "Customers"
        icon: "users"
        dataStoreRef: "customers"
    - type: dataStoreGrid
      id: ordersTab
      properties:
        title: "Orders"
        icon: "shopping-cart"
        dataStoreRef: "orders"

​
Sticky Tabs

When tabsSticky is enabled, the tab strip remains visible at the top of the viewport as you scroll through tab content. This is useful for forms with long content sections. 
- type: tabs
  id: longFormTabs
  properties:
    tabsSticky: true
  children:
    # Long content sections...

​
Tab Transitions

The component includes smooth fade and slide transitions when switching between tabs, providing a polished user experience.

​
Performance Optimization

The component uses computed caching for tab lookups and maintains the current tab index for efficient switching between tabs.

​
Notes

  • Requires at least one child card to function properly
  • Child cards must have unique IDs
  • The first child card is selected by default when the tabs component loads
  • Empty state is displayed if a tab’s corresponding card cannot be found
  • Tab content is rendered using the standard KodexaFormCard component, so any card type can be used as a child