Build application tabs
The components, Tabs and Tab Panels, enable you to add tabs to an application page and build unique content for each one.
To create tabs for your application:
- 1.
- 2.Add and configure Tab Panels: Use the Tab Panels component to build content for each tab in your application.
- 3.Link Tabs and Tab Panels: Connect the Tabs and Tab Panels components, so the tab content changes when a tab is selected.
To add tabs to an application page:
- 1.Drag-and-drop the Tabs component into your application.
- 2.Select the Tabs component and open the quick selection Styles menu.
- 3.Open the Tabs Styles menu and select one of the following orientation options:
- horizontal: Arranges tabs side-by-side.
- vertical: Stacks tabs in a vertical column.
- 4.To add additional tabs, open the State menu, and add new items to the items array.Note: Each new item in the items array appears as a new tab in your application UI. The tab name is identical to the text entered in the array.
Once you add and configure your application tabs, continue to the Add and configure Tab Panels section to add a panel for each tab.
The Tab Panels component enables you to add and activate components for each tab in your application:
- 1.Drag-and-Drop the Tab Panels component into your application.
- 2.For each tab in your application, drag-and-drop a container into the Tab Panels component.
- 3.Name each container to correspond with the tabs in your application.
- 4.Add components to each container and configure them as needed. This tutorial adds and configures a Text component for each container.
After you configure each container in the Tab Panels component, continue to the Link Tabs and Tab Panels section to add interactivity to your tabs.
Now that you configured your tabs and tab panels, connect the components to switch tab panels when a tab is clicked:
- 1.Click Logic to enter the Logic view.
- 2.Open the Libraries panel, and scroll down to the Design References section.
- 3.Drag-and-drop the Tabs and Tab Panels references into the logic flow.
- 4.Build the following node connections:
- (Tabs)
onChange> (Tab Panels)setSelectedIndex: Sets which tab panel appears in your application when a tab is selected. - (Tabs)
getSelectedIndex> (Tab Panels)selectedIndex: Sets the displayed tab panel to the selected tab.
- 5.Preview your application to ensure that the tab panel changes when a tab is clicked.
Congratulations! You can now add and configure tabs for your applications.