Tabs
Tabs are used within applications to group components into separate tabs.
Set tabs and default selection
Drag a Tabs component from the Components panel
In the Properties panel, rename the tab names
Click Add a Tab to create and additional tab
Enter the name of the Default Tab to have a specific table opened on application load
Reorder tabs
Click and hold the tab's handle and drag to reorder
Tabs Properties
Component Properties
Property | Description |
---|---|
Default Tab | Set the default tab to open on |
Scroll Contents | Enable scrollability within the tabs component for larger tabs |
Visible | Set true to show and false to hide. Set dynamically using Javascript with {{}} |
Settable Properties
Property Via Form / Via RunJS | Type | Example Value |
---|---|---|
Selected Tab / selectedTab | string | "Tab Name" |
Reference Properties
Properties can be accessed from other frontend components and backend APIs by adding the name of the Tabs component, and dot referencing the property. For a Tabs component named Tabs1
:
Property | Description |
---|---|
Tabs1.selectedTab | Returns the name of the selected tab as a string |
Tabs1.tabs | Returns an array of all the tabs |
Tabs1.isVisible | Returns the boolean value of the component's visibility (True, if it is visible) |
Events
The following events are triggered by user interactions with Tabs components. Use event handlers to trigger actions in response to user events.
Property | Description |
---|---|
onTabSelected | Run an API every time a tab is selected |