You can configure a group of tabs that can be switched and dynamically added or deleted.

Fields

FieldDescriptionTypeRequiredRemarks
nameThe name of the control.stringYesNone
typeThe type of the control.stringYesNone
defaultThe default value.objectNoIf this field is not specified, the default value is empty.
addableSpecifies whether the tabs can be dynamically added or deleted.booleanNoThe default value is true.
templateThe template that is used to dynamically add or delete tabs.objectNoThe default value is {}.
childrenThe settings of each tab.arrayNoThe default value is []. The key of the tab cannot be _icon, id, or _label.
Note You can add _label to customize the tab name and add the _icon field to specify an icon. For example, change the tab name from Series 1 to Template.
foldSpecifies whether to show the tab by default.booleanNoThe default value is true.

Values

ConditionData typeExampleDefault valueRemarks
N/Aarray
[
 {
   "name": "Series 1",
 },
 {
   "name": "Series 2",
 }
]
[]
You can add _label to customize a tab name and add _icon to specify an icon.

Sample configurations

  • The template field configured (Tabs can be dynamically added or deleted.)Configuration example 1
     "tabs": {
        "name": "Tab",
        "type": "tabs",
        "maxTabs": 10,
        "default": [
          {
            "seriesName": "Steel"
          }
        ],
        "template": {
          "name": "Series <%= i + 1%>",
          "children": {
            "seriesName": {
              "type": "text",
              "name": "Series Name"
            }
          }
        }
    }
  • The template field not configured (fixed content)Configuration example 2
    "tabs": {
        "name": "Tab",
        "type": "tabs",
        "addable": false,
        "children": [
          {
            "Name": "User Information",
            "children": {
              "serieName": {
                "name": "Name",
                "type": "text"
              }
            }
          },
          {
            "name": "Apply",
            "children": {
              "switch": {
                "name": "Switch",
                "type": "switch"
              }
            }
          }
        ]
    }
  • Custom label and iconConfiguration example 3

    You must specify the URL of the icon.

    {
      "tabs": {
        "name": "Tab",
        "type": "tabs",
        "default": [
          {
            "link": true,
            "_label": "Food Industry",
            "_icon": "https://img.alicdn.com/tfs/TB1fck7voH1gK0jSZSyXXXtlpXa-201-200.png"
          }
        ],
        "template": {
          "name": "Series <%= i + 1%>",
          "children": {
            "link": {
              "type": "switch",
              "name": "Link"
            }
          }
        }
      }
    }