Skip to main content

Tabs

The tabs widget is a special widget that contains multiple containers. Tabs can be used to contextually show UI to a user based on their choices.

How to use Tabs Widget

Properties

Properties allow you to edit the widget, connect it with other widgets and customize the user actions.

Widget Properties

These properties allow you to edit the widget. All these properties are present in the property pane of the widget. The following table lists all the widget properties.

PropertyDescription
TabsThis property lets you add and remove tabs from the widget. Tabs are uniquely identified by their tab names
Default TabThis property selects the tab which matches the corresponding name
Show TabsThis property hides / shows the tabs in the tab widget. It can be used to create the illusion of dynamically changing UI
Scroll ContentsThis property enables scrolling within the contents of each tab
VisibleControls widget's visibility on the page. When turned off, the widget will not be visible when the app is published
Animate LoadingAllows you to control a widget’s animation on the page load.

Binding Properties

These properties help you share values between widgets and also allow you to easily access the widget property within Queries or JS functions.

Widget PropertyDescription
isVisibleThis property indicates whether the widget is visible or not.
selectedTabContains the id of the tab currently selecte

Events

They are a set of actions that you can perform on the widget. The following table lists the actions:

EventsDescription
onTabSelectedSets the action to be run when the user selects a tab. See a list of supported actions.

Styles

Style properties allow you to change the look and feel of the widget.

StylesDescription
Border RadiusAllows you to define curved corners.
Box ShadowAllows you to choose from the available shadow styles.

Creating Dynamic Views

You can create separate UIs in each tab container and dynamically switch between the containers by controlling the Default Tab property. The below code snippet demonstrates how you can control the selected tab based on the value the user sets in a dropdown

{{ Dropdown1.selectedOption === "1" ? "Tab1" : "Tab2" }}

Tab Navigation

By manipulating the properties of a tab widget, it is possible to create a custom navigation scheme for the tab widget. This quick video show's how to setup tab navigation with the storeValue function and some JavaScript: