Beagle v1.7 is no longer actively maintained. The documented version you are viewing may contain deprecated functionality. For up-to-date documentation, see the latest version .
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:
Attribute | Type | Required | Definition |
---|---|---|---|
items | TabBarItem | ✓ | Receive a list of TabBarItems that will define the Tabs in the TabBar |
styleId | String | Style ID that identifies an style to be applied on the TabBar | |
currentTab | Bind<Int> | Integer number that identifies the selected TabBarItem | |
onTabSelection | List<Action> | List of Actions that are performed when a TabBarItem is selected. It can be used to load views according to the selected TabBarItem . |
This component represents the TabBarItem
presented on a Tab Bar.
Attributes | Type | Required | Definition |
---|---|---|---|
title | String | Displays 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. | |
icon | Path | Displays 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. |
TabBarItem
, the empty space will remain. If you need navigation between viewers without the Tab interface, it is recommended that you use the navigation actionsOn 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.
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 |
---|
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.