Tabs / TabControls let you create groups of equal importance in your user interface, with those groups appearing horizontally. They are most often used to express groups of fields that are peers, or siblings: data that should be considered at the same level of hierarchy.
For example, you may have one collection of fields for “Doors” and another for “Transoms” and “Windows”. Use the tab control to group these fields so your users see them as equal options. You can even have nested tabs (as seen in the third "Windows" tab).
Tabs are built by using two layout elements: The TabControl and the Tab itself.
Use
- First, use the configurator design tree to create your TabControl, which defines the horizontal space your tabs will fill. Select any layout that supports tabs (for example, a page or expander) and click the "+" symbol. Select TabControl.
- Then, select the TabControl and click the "+" symbol for as many Tabs as you need. To reorder the tabs, drag them up or down in the design tree.
To have any other UI component appear only when the tab is selected, use the configurator design tree to drag the element into the tab.
Container-based position properties appear for this element (and any interface element) when it is placed within a container, and help align it within the container. For example, if you place this UI element within a container, the following properties will appear. Take it out of the container, and place it on a page, and these properties will disappear. Furthermore, the actual position properties themselves change, depending on that parent container's Item Layout.Position
Place this element into a container, and then return to this element's properties list. The "Position" accordion will now appear in the properties list.
Change the parent container's item layout to horizontal, vertical, or absolute. Then return to this UI element. The position properties available for items within that layout (marked by green checkmarks below) will appear.
Property | Available when in a horizontal layout | Available when in a vertical layout | Available when in an absolute layout | Description |
---|---|---|---|---|
Relative Size |
|
|
|
When using relative sizes, try setting all items within the container to the relative size of "x1" as a starting point, and then adjust the xN levels as necessary. Mixing items with "auto" and "xN" settings is allowed, but may be difficult to manage. |
Alignment |
|
|
|
Controls how this item within a container is aligned in the cross axis of the container's layout.
|
Left Top Right Bottom Width Height |
|
|
|
The distance between the edge of the parent container and this element. By default, each is "auto". Usually, you would set only 2 of these properties, leaving the rest to "auto", or you may distort this image or element. For example, to align an item's upper-right corner to the upper-right corner of the parent container, set "Top" to 0px, and "Right" to 0px, leaving all other distances to "auto". |
Opacity |
|
|
|
The visibility of items or backgrounds behind this item. Use any decimal number from 0 to 1. Set to 0 to make this item completely transparent. Set to 1 to make the item completely opaque. |
Order |
|
|
|
Specifies the order in which this item is drawn in the container. Use a whole number, such as 0 or 132. Default: 0. Larger numbers are drawn later, and appear closer to the user.
|
Use Zero Padding |
![]() |
![]() |
![]() |
By default, UI elements have some padding around them for legibility on all devices, and for ease of use on touch-enabled devices. However, in some cases you may want specific UI elements to have no padding around them at all (to touch each other). This can be useful to create a portion of your UI which needs a very high information density. For example, to create a grid of fields that appear like cells in a spreadsheet. |