Tabs · Flowable Forms

Horizontal menu component with selectable items as tabs.

Demo

Basic example

{
  "type": "tabs",
  "value": "{{tabs}}",
  "extraSettings": {
    "activetab": "id-3",
    "tabsorder": [
      "id-2",
      "id-3",
      "id-1"
    ],
    "sections": [
      {
        "id": "id-1",
        "type": "panel",
        "value": "{{tab1}}",
        "label": "Tab One",
        "extraSettings": {
          "layoutDefinition": {
            "rows": [
              {
                "cols": [
                  {
                    "type": "text",
                    "value": "{{txt}}",
                    "label": "Text"
                  }
                ]
              }
            ]
          }
        }
      },
      {
        "id": "id-2",
        "type": "panel",
        "value": "{{tab2}}",
        "label": "Tab Two",
        "extraSettings": {
          "layoutDefinition": {
            "rows": [
              {
                "cols": [
                  {
                    "type": "number",
                    "value": "{{num}}",
                    "label": "Number"
                  }
                ]
              }
            ]
          }
        }
      },
      {
        "id": "id-3",
        "type": "panel",
        "value": "{{tab3}}",
        "label": "Tab Three",
        "extraSettings": {
          "layoutDefinition": {
            "rows": [
              {
                "cols": [
                  {
                    "type": "date",
                    "value": "{{date}}",
                    "label": "Date"
                  }
                ]
              }
            ]
          }
        }
      }
    ]
  }
}

Attributes

Attribute	Type	Description
type	`string`	Type expected is tabs

See section Common attributes.

Extra attributes

Attribute	Type	Description
activetab	`string`	Section ID identifying active tab.
tabsorder	`string[]`	Array of sections IDs representing tabs order.
sections	`Object[]`	Array of panel or subform definitions.

NOTES
Every panel/subform in the array will be a tab with its own label.
Every section can be shown/hidden dynamically through ignore/visible properties

When to use it

Use it for selectable menus and selectable content separation.
For showing or hidding content selectable through tabs, consider using panels with attribute visible bound to a tab-related {{expression}}. See homepage example.