TabsLayout is a container that implements the ViewsContainer interface. All child Views are stackedon top of each other and each takes up the entire container space.Only one child View (current) is available at a time. Tabs, that are located along one of the sides of the container,are used to select the current View.

To create a TabsLayout, use the function

func NewTabsLayout(session Session, params Params) TabsLayout

A bookmark is created for each View. A bookmark can display a title, an icon, and a close button.

The title is set using the "title" text property (constant Title) of the child View.The "title" property is optional. If it is not specified, then there will be no text on the tab.

The icon is set using the "icon" text property (constant Icon) of the child View.As a value, it is assigned the name of the icon file (if the icon is located in the application resources) or url.The "icon" property is optional. If it is not specified, then there will be no icon on the tab.

The display of the tab close button is controlled by the "tab-close-button" boolean property (constant TabCloseButton)."true" enables the display of the close button for the tab. The default is "false".

The "tab-close-button" properties can be set for both the child View and the TabsLayout itself.Setting the value of the "tab-close-button" property for the TabsLayout enables/disables the displayof the close button for all tabs at once. The "tab-close-button" value set on the child Viewtakes precedence over the value set on the TabsLayout.

The tab close button does not close the tab, but only generates the "tab-close-event" event (constant TabCloseEvent).The main handler for this event has the format

func(layout TabsLayout, index int)

where the second element is the index of the child View.

As already mentioned, clicking on the close tab button does not close the tab.You must close the tab yourself. This is done as follows

tabsView.Set(rui.TabCloseEvent, func(layout rui.TabsLayout, index int) {

You can control the current View using the "current" integer property (constant Current).To programmatically switch tabs, set this property to the index of the new current View.You can read the value of the "current" property using the function

func GetCurrent(view View, subviewID ...string) int

Also, the "current" property can be used to track changes to the current View:

tabsView.SetChangeListener(rui.Current, func(view rui.View, tag string) {
	// current view changed

Tabs are positioned along one side of the TabsLayout container. The tabs are positioned usingthe "tabs" integer property (the Tabs constant). This property can take on the following values:

Value Constant Name Placement of tabs
0 TopTabs "top" Top. Default value.
1 BottomTabs "bottom" Bottom.
2 LeftTabs "left" Left. Each tab is rotated 90 ° counterclockwise.
3 RightTabs "right" On right. Each tab is rotated 90 ° clockwise.
4 LeftListTabs "left-list" Left. The tabs are displayed as a list.
5 RightListTabs "right-list" On right. The tabs are displayed as a list.
6 HiddenTabs "hidden" The tabs are hidden.

Why do I need the value HiddenTabs. The point is that TabsLayout implements the ListAdapter interface.Which makes it easy to implement tabs with a ListView. This is where the HiddenTabs value comes in.

For displaying the current (selected) tab of type TopTabs, BottomTabs, LeftListTabs and RightListTabs,the "ruiCurrentTab" style is used, and for tab of type LeftTabs and RightTabs, the "ruiCurrentVerticalTab" style is used.If you want to customize the display of tabs, you can either override these styles, or assign your own style usingthe "current-tab-style" property (constant CurrentTabStyle).

Accordingly, for an inactive tab, the "ruiTab" and "ruiVerticalTab" styles are used,and you can assign your own style using the "tab-style" property (constant TabStyle).

The "ruiTabBar" style is used to display the tab bar, and you can assign your own styleusing the "tab-bar-style" property (constant TabBarStyle).