TabSet - mattbichay/test GitHub Wiki

PageOutline(1-5, Contents)

Table of Contents

Tab set

The Controls plugin comes with a tab set control for breaking up content over multiple tabbed panels. The control has a list of tabs which are always visible and can be clicked on to display their associated panel. Only one panel is visible at any one time.

You can find the RML documentation for the tab set element [wiki:documentation/RML/Controls#TABSETElement].

Here is an RML sample demonstrating the declaration of a tab set:

The Rocket::Controls::ElementTabSet class (found in Rocket/Controls/ElementTabSet.h) defines the interface to tab set elements.

The function GetNumTabs() will return the number of panels within the tab set.

Setting tab content

Through C++, the contents of the panel tabs can be set to either unparsed RML or an existing element hierarchy.

When the contents of a tab is set, it will replace whatever it had before. If you specify a tab index that doesn't exist, it will be created.

Note that these functions only set the content of the tab buttons, not the panels themselves.

Setting panel content

Similarly to the panel tabs, the content of the panels themselves can be set to unparsed RML or an existing element.

Removing panels

The RemoveTab() function will remove an existing tab and its panel from the tab set.

Applying properties

Tab sets and their elements can have properties applied on them like other elements, and will need to in order to be positioned correctly. By default, all tabs have their 'display' property set to 'inline-block', as required for a horizontal layout. If you want to change this behaviour, you will need to edit the tab creation code in ElementTabSet.cpp.

The diagram below details the internal hierarchy of the tab set.

Image(controls_tabset_1.gif, nolink)

The tab set element itself (tagged tabset) will have two child elements, panels, which holds all the panel elements, and tabs, which holds all the tab elements. Each of the panel and tab elements hold arbitrary RML content. A typical RCSS definition for a tab set would be follows:

The order of the panels and tabs elements is determined by the RML order; if a panel element is encountered before a tab element, the panels element will be created first, and vice versa. This way, you can create a tab set with tabs on the bottom or top.

⚠️ **GitHub.com Fallback** ⚠️