Tabs
Tabs is a widget used to display content that is grouped by tab. You can switch between tabs.
The widget consists of:
- Tabs Menu with Tab Titles
- Tabs Content with the Tab Panes nested inside, each of which is relevant to one of the tabs
You can add any elements and widgets to the Tab Title and Tab Pane elements.
By default, the widget has a horizontal view. You can change it to vertical using the Styles tab in the right panel.
To do this:
- for the Tabs element, in the Auto Layout section, set Direction to horizontal (right arrow),
- for the Tabs Menu element, in the Auto Layout section, set the Direction to vertical (down arrow)
On the Settings tab in the right panel, you can control the content and operation of the widget.
In the settings, you can select the action that will result in the Transition event. Click is the default action for the Transition event. You can also select Hover.
You can manage the Tabs elements, i.e. you can:
- add an element by clicking on “+”
- delete an element by clicking on “-”
- move an element by holding the icon with three stripes to the left of the element name
Tab Title elements have the same structure and styles by default. The same also applies to Tab Pane elements. For example, if you nest an Image element into one of the Tab Title elements, the same element will be added to all other Tab Titles.
You can use Apply independent structure setting with the tabs. It allows you to make the structure of these elements independent of each other. That is, each element can have different elements and widgets with different styles. Once this setting is enabled, it cannot be cancelled.
You can set up animation when switching between the tabs.
Animation settings offer the following options:
- Effect type defines the effect to be used when opening a tab
- None
- Fade (default)
- Slide Horizontal
- Slide Vertical
- Smoothness and duration of animation when opening and closing a tab (Open/Close)
- Animation smoothness is defined with Bezier curves, showing the speed of animation at different stages. You can select the desired type from the dropdown list. The default type is Linear.
- Animation duration (in milliseconds). You can select animation duration from 0 to 2000ms from the dropdown list. The default value is 200ms.
You can switch between Tab Panes using the Settings tab.
Clicking on the tab name switches to the Tab Pane element of the corresponding tab on the Canvas.
For example:
![Click on the [Tab 2] in the settings](https://lh6.googleusercontent.com/93vMd-rsPfUSpN25iiMa8xxTWqoU2cJPokbCkyQU0rUvf_DWuo95DGY9mVKd23PPbhlWWmZ66Rca8F-5tYpMN9tspSp1VlllPaBQtN0nNSn94T0QNOpQVpiYok7A1TLKr0U3OeTsz6g6SxPKSn9w1q4RibE7DocTxBeT0DNjEpYyuyR3u3weC2cd2lOKog "Click on the [Tab 2] in the settings")
![You will be switched to the Tab Pane [Tab 2] element in the Canvas](https://lh5.googleusercontent.com/7ApASPRL2WnhtlyVj61_C011a1ZvmHbGWve2Gwzk1D-rRzcKV_KcDTH5mKIzG9FHvlS-DA_woFn54p6Eu7KVTY2lOT417dse3NLO6gCjMwNkIJiqG6Z3gDMGEBOTIiikeawXhqV4us_c0fHElk_PdZAV3v_WvzHrCnDX_3Jp_CxB_kuouPowCDUozByV8Q "You will be switched to the Tab Pane [Tab 2] element in the Canvas")
After switching to the desired Tab Pane, you can edit the content of this tab.
You can style the Tabs widget using the Styles tab in the right panel. You can style both the entire widget and its individual elements. For example, you can set borders, margins and paddings for the whole Tabs widget, as well as paddings for Tab Panes.
Styling an open Tab element
To style an open (active) element, use the Opened state.
Style an element for this state. For example, you can set the background and borders for the Tab Title and Tab Pane.
