Tabs layout element

Level: beginner

Tabs is a layout element to add a tab area to the page. Learn more: Tabs, Set up a Tabs layout element (user documentation).

View an example of a configuration object that sets up the functionality of the Tabs layout element below.

Example of a configuration object that sets up the functionality of the Tabs layout element

viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    {
        "operation": "insert",
        "name": "TabPanel_zg3ur0g",
        "values": {
            "type": "crt.TabPanel",
            "items": [],
            "mode": "tab",
            "styleType": "default",
            "bodyBackgroundColor": "primary-contrast-500",
            "tabTitleColor": "auto",
            "selectedTabTitleColor": "auto",
            "headerBackgroundColor": "auto",
            "underlineSelectedTabColor": "auto",
            "fitContent": true,
            "allowToggleClose": true
        },
        "parentName": "GeneralInfoTab",
        "propertyName": "items",
        "index": 1
    },
    {
        "operation": "insert",
        "name": "TabContainer_qmujx5c",
        "values": {
            "type": "crt.TabContainer",
            "items": [],
            "caption": "#ResourceString(TabContainer_qmujx5c_caption)#",
            "iconPosition": "only-text",
            "visible": true,
            "padding": {
                "top": "medium"
            }
        },
        "parentName": "TabPanel_zg3ur0g",
        "propertyName": "items",
        "index": 0
    },
    {
        "operation": "insert",
        "name": "TabContainer_5zh0b5k",
        "values": {
            "type": "crt.TabContainer",
            "items": [],
            "caption": "#ResourceString(TabContainer_5zh0b5k_caption)#"
        },
        "parentName": "TabPanel_zg3ur0g",
        "propertyName": "items",
        "index": 1
    }
]/**SCHEMA_VIEW_CONFIG_DIFF*/,

TabPanel element

string type

Type of a Freedom UI element. For the TabPanel element, "crt.TabPanel."

---

array items

Collection of TabContainer elements nested in the TabPanel element.

---

string mode

Display mode of the TabPanel element. For Tabs layout element, "tab."

---

boolean fitContent

Whether to fit the width of the tab area to its content. By default, "false."

Available values

Value	Description
true	The width of the tab area fits its content.
false	The width of the tab area is not limited by its content.

---

string styleType

Visual style of the tab area. By default, "default."

Available values

default

additional

---

string bodyBackgroundColor

Background color of the tab area body. By default, "primary-contrast-500."

---

string selectedTabTitleColor

Color of the selected tab title. By default, "auto."

---

string tabTitleColor

Color of unselected tab titles. By default, "auto."

---

string underlineSelectedTabColor

Color of the underline beneath the selected tab. By default, "auto."

---

string headerBackgroundColor

Background color of the tab header area. By default, "auto."

---

number selectedTabIndex

Index of the tab selected by default. By default, "0."

---

boolean allowToggleClose

Whether to display or hide button that closes the tab area. By default, "true."

Available values

Value	Description
true	The button is displayed.
false	The button is hidden.

---

TabContainer element

The TabContainer element represents an individual tab within the TabPanel element.

string type

Type of a Freedom UI element. For the TabContainer element, "crt.TabContainer."

---

array items

Collection of elements nested in the TabContainer element.

---

string caption

Localizable caption of the tab displayed in the tab area.

---

string iconPosition

Position of the icon relative to the tab caption. By default, "only-text."

Available values

Value	Description
only-text	Only the caption is displayed, no icon.
only-icon	Only the icon is displayed, no caption.
icon-left	The icon is displayed to the left of the caption.
icon-right	The icon is displayed to the right of the caption.

---

boolean visible

Whether to display the tab. By default, "true."

Available values

Value	Description
true	The tab is displayed.
false	The tab is hidden.

---

object padding

Define the padding for an individual tab. Different tabs within the same element can have different padding values. This setting can provide a specific value for each side. The property can accept numbers, strings, and the available values listed below. Available in Creatio 8.3.4 and later.

Parameters

Name	Type	Description
top	string	Top padding of the tab.
bottom	string	Bottom padding of the tab.
left	string	Left padding of the tab.
right	string	Right padding of the tab.

Available values

none

extra-small

small

medium

large

---

GridContainer element

Grid container layout element to arrange content within a tab. Learn more: Grid container layout element.

---

See also

Overview of Freedom UI Designer and its elements (user documentation)

Set up a Tabs layout element (user documentation)