Tabs in web pages

You can display related information on tab pages. Here is an example where Tours, Bookers and Guides of the selected Tour Programme are displayed on 3 tabs at the bottom of the page. In this particular example, the tabs contain related queries on child tables of the Tour Programme table. As a result, the content shown in the tabs changes ("moves along”) with the selection the user makes in the top box:

How to build

To realise tabs in web pages:

1. From the Controls catalog on the left, drag a TabsControl (not: a TabControl) onto the appropriate node of the object tree on the right. To get tabs in the main page, drag the TabsControl onto the top-level (Page) node.
2. For each tab page you require, drag a TabControl from the catalog onto the TabsControl.
3. (Suggested:) For each tab page, insert a Group control into the TabsControl. You can do that by dragging from the catalog or by choosing Insert, Group from the menu. The object tree should now look something like this:

4. For each TabControl, in the Property Inspector, set the Title property to the title you want the tab to display. Set the Panel property to the Id of the Group control that holds the contents for that tab page.

5. Make sure each Group control contains the content that you want the corresponding tab page to show.

You may want to add some extra margin above the tabs, and some extra vertical space for the tab titles:

.uiTabsControl.tabs {
	margin-top:30px;
}

.uiTabsControl.tabs > ul.nav.nav-tabs li a {
	height:40px;
)