Tabs

The Tabs tabs is a layout component, use it to organize fields in multiple tabs. Fields are defined in fields key as hash object, each key of the fields objects is an array of fields and must match the values of the tabs array of object.

Example


{
  "component": "tabs",
  "label": "My Tabs",
  "name": "my_tabs",
  "tabs": [
    {
      "value": "one",
      "label": "One"
    },
    {
      "value": "two",
      "label": "Two"
    },
    {
      "value": "three",
      "label": "Three"
    }
  ],
  "fields": {
    "one": [
      {
        "component": "input-text",
        "label": "Field 2",
        "name": "field_2"
      }
    ],
    "two": [
      {
        "component": "input-text",
        "label": "Field 3",
        "name": "field_3"
      }
    ],
    "three": [
      {
        "component": "input-text",
        "label": "Field 4",
        "name": "field_4"
      }
    ]
  }
}

LetsForm DSL

The above example can also be defined with LetsForm DSL


<LfTabs
  label="Field 1"
  name="field_1"
>
  <LfTab
    value="one"
    label="One"
  >
    <LfField
      component="input-text"
      label="Field 2"
      name="field_2"
    />
  </LfTab>
  <LfTab
    value="two"
    label="Two"
  >
    <LfField
      component="input-text"
      label="Field 3"
      name="field_3"
    />
  </LfTab>
  <LfTab
    value="three"
    label="Three"
  >
    <LfField
      component="input-text"
      label="Field 4"
      name="field_4"
    />
  </LfTab>
</LfTabs>
};
 
export { MyForm };

Reference

Property	Type	Description
component	string	= "tabs"
name	string	The name of the field and the key of the JSON
tabs	[tab]	An array of object (with value and label keys) which defines the tabs
hidden	boolean	Hides the field from the form
className	string	CSS class name to assign to the field container
fields	Object	Object, each keys (name of the tab) is an array of fields for the form tab
Pick up a framework to show specific properties Select framework

Properties for tab object

Property	Type	Description
value	string	Internal name for tab, to be used with Form Scripts
label	string	Name of the tab
Pick up a framework to show specific properties Select framework