Tabs
In this tutorial, you will learn how to build a tabbed interface in Abstra.
.svg?alt=media&token=eae34f21-e37c-4099-90b2-9c17058c0cd9)
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.
Create an
activeTab local variable with a Default value of 1.
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
activeTab variable.
You may paste the following code, using the references we just created:
[$.tab1, $.tab2, $.tab3][$.activeTab-1]
What does this code mean?
- Firstly, we create an array containing all three references from our example:
[$.tab1, $.tab2, $.tab3] - Next, we select an item of this array based on our previously created
activeTabvariable:[$.tab1, $.tab2, $.tab3][$.activeTab] - As arrays index start on
0and our tabs on1we need to subtract 1:[$.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:
number and activeNumber.
Next, we will define some styling property using JS mode, comparing
number with activeNumber. In the animation below we do this on the Background property.
The following code was used:
{
"type": "SOLID_COLOR",
"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
activeNumber as the activeTab value and number as 1, 2 and 3
And we're all set!
Last modified 1yr ago