In this tutorial, you will learn how to build a tabbed interface in Abstra.
Firstly, create the basic components we are going to use:
- A button component which our users will click to change tabs
- Components containing each tab content
In our main page, we need a variable in order to store the currently active tab and consult this value later on.
activeTablocal variable with a Default value of
Next, we should set actions to our buttons in order to change this variable.
At this point, we can already use our variable to change content on the page. Make sure there is a Subview element placed on the page.
Open its JS editor on the Page or component property and create references to each component that is going to be used as some tab's content.
Now, let's move to the actual code. We want the Page or component property to change accordingly to our
You may paste the following code, using the references we just created:
[$.tab1, $.tab2, $.tab3][$.activeTab-1]
Now, our content should change as we click the buttons.
You may have noticed that buttons are not changing styles according to the active tab. In order to produce this behavior, we need some additional logic.
Start creating two local variables in your button component:
Next, we will define some styling property using JS mode, comparing
In the animation below we do this on the Background property.
The following code was used:
"color": $.number === $.activeNumber ? "#EA576AFF" :"#FFFFFF"
Finally, we should pass values from the page to the variables we created in the button component. Select the subview on the page and set
And we're all set!