Pageview

Page View components description and its attributes details

What is it?

PageView component is a container that present pages that it will be horizontally displayed. They can be any server-driven object.

See how the structure is represented:

AttributeTypeRequiredDefinition
childrenList<ServerDrivenComponent>Defines the visual components list (server-driven) in the PageView.
contextContextDataIt is the context contained by this Widget.
onPageChangeList<Action>Action list that runs when the selected page is altered.
currentPageIntIdentifier where the page is seletected.
showArrowBooleanThis attribute is specific for the web platform. It enables arrows to change pages.

How to use it?

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"
                        )
                    )
                )
            )
        )
    )