Skip to main content

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

Drag a tabs component on to the canvas and adjust its properties to rename the tabs

Reorder tabs

  1. Click and hold the tab's handle and drag to reorder

Drag and drop the tabs in the properties pane to reorder them

Tabs Properties

Component Properties

PropertyDescription
Default TabSet the default tab to open on
Tab Header Text StyleChanges the style (font, size, etc.) of each tab headers' text. Configure styles in the Typography settings
Tab Header Text ColorChanges the color of each tab headers' text
Scroll ContentsEnable scrollability within the tabs component for larger tabs
VisibleSet true to show and false to hide. Set dynamically using JavaScript with {{}}

Settable Properties

Property Via Form / Via RunJSTypeExample Value
Selected Tab / selectedTabstring"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:

PropertyDescription
Tabs1.selectedTabReturns the name of the selected tab as a string
Tabs1.tabsReturns an array of all the tabs
Tabs1.isVisibleReturns 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.

PropertyDescription
onTabSelectedRun an API every time a tab is selected