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.

Horizontal and vertical tabs

By default, the widget has a horizontal view. You can change it to vertical using the Styles tab in the right panel.

Horizontal tabs

Vertical tabs

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).

Tabs settings

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.

Managing Tabs elements

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 elements structure

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.

Once independent structure is enabled, it cannot be undone.

Animation

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.

Editing Tabs content

You can switch between Tab Panes using the Settings tab . When the state is switched to Open , the corresponding tab will be displayed.

After switching to the desired Tab Pane, you can edit the content of this tab.

You can also open a specific tab by selecting the corresponding Tab Item on the canvas or in the Layers panel, and then switching the UI State to Open in the Settings.

Tabs styles

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.