Tabs
Tabs components allow you to host other components in several tabs. Each tab is a container. Tabs have three display modes:
Tabs: the tabs are displayed horizontally.Sidebar: the tabs are displayed vertically.Invisible on view: The tabs are not displayed when the app is viewed. They are only displayed in the app editor. This is useful to make multi-page apps, where each page is a tab.
To add a component to a tabs component, you can either click on Insert while you selected the tabs component, or you can move an existing component by cutting it and pasting it in the tabs component.
The following section details Tabs component's specific settings. For more details on the App Editor, check the dedicated documentation or the App Editor Quickstart:
App Editor Documentation
The app editor is a low-code builder to create custom User Interfaces with a mix of drag-and-drop and code.
Apps Quickstart
Learn how to build your first app in a matter of minutes.
Tabs configuration
| Name | Type | Connectable | Templatable | Default | Description |
|---|---|---|---|---|---|
| Tabs Kind | Tabs, Sidebar, Invisible on view | false | false | Tabs | The display mode of the tabs. |
Outputs
| Name | Type | Description |
|---|---|---|
| selectedTabIndex | number | Number of the selected tab. |
Controls
This component can be controlled by frontend scripts using these functions:
| Name | Parameters | Description | Example |
|---|---|---|---|
| setTab | id: string, index:number | Set the current tab. | setTab('a',1) |
Event handler
The tab component has the following event handler:
onTabChange: Trigger a runnable when the user changes the tab.
Multiple runnables can be added to each event handler.