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.
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.
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.
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
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.
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.
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".
That's it! Now the selected tab is highlighted and the appropriate containers show/hide based on the selection.