Responsible for the number of tabs in the container. Adding additional elements to this array will result in an additional tab being rendered on the component.
In addition, each element is responsible for determining the content of the tab: either text or an embedded view. By default, the component starts with a single element is this array, set to a value type. Providing a string to the element will set the text on the tab.
If the element is changed to an object data type, then the text on the tab can be set by adding a text value member to the object and providing a string, as seen on element 0 below. Alternatively, viewPath (value data type) and viewParams (object data type) can be added to the element, which allows you to render a view inside the tab as well as pass parameters to it. Element 1 below demonstrates the idea.
Which index in tabs array is currently active.
If the type is 'classic', a traditional menu with boxed tabs is shown. If the type is 'modern', it has no borders around each tab and shows selection with an underline.
value: string dropdown
Default size allotted to a single tab. If a container width does not allow, tab width will shrink from this size accordingly.
Width in pixels for the tab size.
Height in pixels for the tab size.
Opens the Style menu to change Tab properties: Text, Background, Margin and Padding, Border, and Misc.
value: string dropdown
Sets a style for the content frame component. Full menu of style options is available. You can also specify a style class.
Additional styling to apply to all tabs depending active (selected) or inactive state.
Sets a style for a tab when it is the active tab. TheStyle menumenu contains all the tools for modifying text, background, margins, borders, and more. You can also specify a style class.
Sets a style for tabs that are inactive. The Style menucontains all the tools for modifying text, background, margins, borders, and more. You can also specify a style class.
The Tab container has some additional ways to interact with it besides just with the Property Editor. The Tab container has two tabs preconfigured. To add or remove tabs, you can do so by interacting with the tabs themselves, or by adding or removing elements in the tabs array.
Adding Components to Tabs
To add a component to a tab, deep select the Tab container, then drag a component onto it.
Adding and Deleting Tabs
To delete a tab, click on the "X" to the right of the tab itself.
To add a tab, click on the Add icon to the right of the tabs:
You can also use the right-click menu in the Property Editor. Just right click on the tab you want to work with. You'll see options for copying, pasting,
Returns an ArrayList, which contains references to all components inside of the container.
Array List - An ArrayList of components in the container. The resulting ArrayList can be iterated over via a for-loop.
In this example, the default (Classic variant) Tab Container is used. Three tabs are set up in the Tab Container component. Tab 3 is active and contains a Map component.
In this example, the default (Modern variant) Tab Container is used. Two tabs are set up in the Tab Container component, each with a Cylindrical Tank component.