Tabbar

In this section, you will find a description of the Tab Bar component and its attributes

What is it?

The Tab Bar component is responsible for defining a table that allows navigation between views. It displays tabs corresponding to different views that can be accessed through it.

Your structure is represented by the attributes below:

AttributeTypeRequiredDefinition
itemsTabBarItemReceive a list of TabBarItems that will define the Tabs in the TabBar
styleIdStringStyle ID that identifies an style to be applied on the TabBar
currentTabBind<Int>Integer number that identifies the selected TabBarItem
onTabSelectionList<Action>List of Actions that are performed when a TabBarItem is selected. It can be used to load views according to the selected TabBarItem.

What is Tab Bar Item?

This component represents the TabBarItem presented on a Tab Bar.

AttributesTypeRequiredDefinition
titleStringDisplays the text in the Tab Bar item Title. If it is not declared or if it is set to null, it will not appear on the screen. The tab won’t be displayed.
iconPathDisplays a local image as an icon in the Tab Bar Item. If it is not declared or is set to null, it will not appear on the screen.

How to use it?

On the following example, it will be used two componentes to explain TabBar: PageView and Context.

Page View is used to render the pages you want to display, that is, it will create the view on each selected tab. This is where you will define the components you want to display by clicking on each tab.

The components will be rendered according to their position in the list of componentes defined at the Page View Component.

It means that, if we have 2 text components in our list - TAB 1 and TAB 2 -, The first has a position of ZERO = 0, and the second has ONE = 1.

The currentTab attribute is the one that defines which component is displayed according to the value defined in it.

The Context is used to save the indicator (position) of the selected tab, and inform it to PageView, which coordinates which element will be displayed.

Example

Screen(
    child = Container(
        context = ContextData("contestTabid", 0),
        children = listOf(
            TabBar(
                onTabSelection = listOf(
                    SetContext(
                        "contestTabId",
                        "@{onTabSelection}"
                    )
                ),
                items = listOf(
                    TabBarItem("Tab 1"),
                    TabBarItem("Tab 2")
                ),
                styleId = "TabBarStyle"
            ),
            PageView(
                currentPage = expressionOf("@{contestTabid}"),
                children = listOf(
                    Text(
                        "Tab 1"
                    ),
                    Text(
                        "Tab 2"
                    )
                )
            )
        )
    )
)
Tab Bar

👉 Test this component on the Web Playground


Last modified February 12, 2021: Fix/migrate images to aws (#299) (a7bb5457)