Section forms — Adding a Tab group
Section forms — Adding a Tab group |
|
Using the Tab control, you can array layouts, each with a visible tabbed header, within a tab group. You can position tabs across the top, bottom, right, or left of a layout. You can also stretch the tabs across the width or height of the content. You can use the Tab control to add tabbed Smart layouts to existing tabs in the group.
At runtime, when the user clicks one tab, the layout in that tab becomes visible and the other layout closes. Opening and closing tabs within a container does not affect tabs in other containers.
By default, tabs in a group are configured as dynamic layouts. Using dynamic layouts allows you to take advantage of HTML5 capabilities including cross-browser and cross-platform compatibility, access to the latest HTML markup, and improved performance.
When a tab layout hosts a Dynamic Container, the tab layout automatically adjusts, at runtime, to consume the entire available height and to supply scroll bars when necessary.
For information about using the Tab control in harnesses, see Harness forms — Adding a tab container.
You can configure styles for tabs using the Skin rule. See Skin form — Components tab — Layouts — Tabs.
To create a Smart layout tab group, do the following:
Click the down-arrow (
) at the right end of the Layout control group (
) and select the Tab control (
). Alternatively, click the Layout control group itself to pop-out the Layout control group window.
Drag and drop the control onto the form. As you move the pointer over existing frames, a horizontal yellow line indicates where the tab will be dropped. The tab group appears in a wireframe on the form.
To add a tab to an existing tab group, do the following:
You can quickly add a section to a tab group by dragging the section from the Application Explorer and positioning it next to an existing tab as described above.
To delete a single tab, select the tab and then click Delete (
). To delete an entire tab layout, select the layout and then click the Delete Row button (
), not the Delete Cell button.
To copy an existing layout, click 
to present the wireframe, right-click the existing layout, and then click Copy. Select the location in which you want to paste the layout, right-click and then select Paste Above or Paste Below.
Each tab within a group represents a unique layout and has its own properties panel.
Select the tab you want to modify and click 
on the Tab Group header to open the properties panel.
Field |
Description |
| Style format |
Select the format you want to apply to the tabs in the group.
You can modify formats and create additional formats in the Skin. See Skin form — Components tab — Layouts — Tabs. |
| Tab position |
Select the placement of the tabs at runtime:
If you select |
| Tab orientation | If you selected a left or right Tab position, select to display tabs horizontally or vertically. Horizontal is the default. If you select vertical orientation, the tab title is rotated based on the tab position, left or right. |