Tabs

Live demo

Renders tabs.

Node name : tabs

Attributes

Attribute	Type	Required	Default value	Description
selected-index	int		0	Selected tab index.

Tab item

Renders a content of a tab.

Node name : tab-item

The node needs to be in a tabs node.

Attributes

Attribute	Type	Required	Default value	Description
caption	string	true		Tab caption.
icon	string	false		Tab icon.
visible	bool	false	true	Value indicating whether the tab is visible.

Example

<!-- Displays customer information in tab 1 and addresses in tab 2 -->
<tabs>
  <tab-item caption="@Title" visible="@Computeds.IsSecondTabVisible">
    <vertical-layout>
      <form-field property-name="Name" />
      <form-field property-name="SIREN" />
    </vertical-layout>
  </tab-item>
  <context UIView="AddressListUI"> <!-- Displays the address list -->
    <tab-item caption="@Title">
      <datagrid />
    </tab-item>
  </context>
</tabs>

Note

By default, children nodes of a tab item will have their width expanded to fill their container. This behavior can be overridden by setting a layout:width directive on children nodes.