Tabs

Tabs are used within applications to group components into separate tabs.

Set tabs and default selection

1. Drag a Tabs component from the Components panel
2. In the Properties panel, rename the tab names
3. Click ** Add a Tab** to create and additional tab
4. Enter the name of the Default Tab to have a specific table opened on application load

Reorder tabs

1. 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
Tab Header Text Style	Changes the style (font, size, etc.) of each tab headers' text. Configure styles in the Typography settings
Tab Header Text Color	Changes the color of each tab headers' text
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