Skip to main content

Tabs Component

Purpose​

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

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.

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