PageView
component is a container that present pages that it will be horizontally displayed. They can be any server-driven object.
The Page View refers to its view size on mobile devices (Android or iOS). This size is determined by the father that it is in, which means that the width and the height will also be defined by the component father.
For example, a Page View can be declared inside of a Container and the width and the height will define the page view size.
See how the structure is represented:
Attribute | Type | Required | Definition |
---|---|---|---|
children | List<ServerDrivenComponent> | ✓ | Defines the visual components list (server-driven) in the PageView . |
context | ContextData | It is the context contained by this Widget. | |
onPageChange | List<Action> | Action list that runs when the selected page is altered. | |
currentPage | Int | Identifier where the page is seletected. | |
showArrow | Boolean | This attribute is specific for the web platform. It enables arrows to change pages. |
On the example below, you will see a PageView that contains three pages that each one of them has a Text defined by the Context. Every time there is a change the context page is redefined:
Screen(
child = Container(
context = ContextData("currentTab", 0),
children = listOf(
TabBar(
onTabSelection = listOf(
SetContext(
"currentTab",
"@{onTabSelection}"
)
),
currentTab = expressionOf("@{currentTab}"),
items = listOf(
TabBarItem("Tab 1"),
TabBarItem("Tab 2")
),
styleId = "TabBarStyle"
),
PageView(
currentPage = expressionOf("@{currentTab}"),
onPageChange = listOf(SetContext(
"currentTab",
"@{onPageChange}"
)),
children = listOf(
Text(
"Tab 1"
),
Text(
"Tab 2"
)
)
)
)
)
)
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.