Soft tabs

In this tutorial, we'll go over how to create a soft tabs that allow you to switch between different content on a page in your app.

For an alternative approach to creating a tab layout using the new Conditional Renderer component. Check out the Conditional Renderer component .power-up.

Example context

In many apps, you have more information on a page than fits the screen. There are many ways to tackle this problem, and one is to use "soft tabs" – a tab bar that sits under the navigation header and allows you to change between different tabs of information.

In our fictional example, our page has three distinct sections: Info, Log and Attachments. We want to create an UI that allows us to switch between these tabs, showing different content for each.

Creating the tabs component

First, drag in a Row container, increase the number of cells to 3 from the Style properties tab, then add Paragraph elements to each tab and give them appropriate content.

Row component with three cells

Adding a page variable

Next, we want to add a page variable to track our selected tab. Go to variables editor from the switch above the canvas and create a String type selectedTab page variable. Give it a default value of info – the other two possible values will be log and attachments.

Showing active tab

Next, we want to make the cell bottom border color be dynamic based on the selected tab.

For each of the three cells, set border style to solid , bottom border width to 2. Then, we'll make the border color dynamic with the formula:

IF(pageVars.selectedTab === "info", theme.$colorNotice, theme.$colorContentSubdued)

The condition will be different for each of the tabs – pageVars.selectedTab === "log" and pageVars.selectedTab == "attachments", respectively.

Since we set the default value to be info, the first tab should be selected when we preview our app.

The first tab is selected.

Switching tabs

Next, we'll add a Set page variable node to each cell's tap event, which sets the selectedTab page variable to the correct value for tapped tab, e.g. info.

Showing/hiding tab content

Finally, we add three containers for each of our tabs. The containers will for now just have an appropriate title label.

We then set the Visible property to be dynamic based on the selected tab, using the same condition as for the active tab, e.g. pageVars.selectedTab === "info".

Test it out

That's it! Now the selected tab is highlighted and the appropriate containers show/hide based on the selection.