PageStack

A stack of Page items that is used for inter-Page navigation. Pages on the stack can be popped, and new Pages can be pushed. The page on top of the stack is the visible one. More...

Inherits StyledItem

Properties

Methods

Detailed Description

PageStack should be used inside a MainView in order to automatically add a header and toolbar to control the stack. The PageStack will automatically set the header title to the title of the Page that is currently on top of the stack, and the tools of the toolbar to the tools of the Page on top of the stack. When more than one Pages are on the stack, the toolbar will automatically feature a back-button that pop the stack when triggered.

Pages that are defined inside the PageStack must initially set their visibility to false to avoid the pages occluding the PageStack before they are pushed. When pushing a Page, its visibility is automatically updated.

Example:

import QtQuick 2.0
import Ubuntu.Components 0.1
import Ubuntu.Components.ListItems 0.1 as ListItem

MainView {
    width: units.gu(48)
    height: units.gu(60)

    PageStack {
        id: pageStack
        Component.onCompleted: push(page0)

        Page {
            id: page0
            title: i18n.tr("Root page")
            visible: false

            Column {
                anchors.fill: parent
                ListItem.Standard {
                    text: i18n.tr("Page one")
                    onClicked: pageStack.push(page1, {color: UbuntuColors.orange})
                    progression: true
                }
                ListItem.Standard {
                    text: i18n.tr("External page")
                    onClicked: pageStack.push(Qt.resolvedUrl("MyCustomPage.qml"))
                    progression: true
                }
            }
        }

        Page {
            title: "Rectangle"
            id: page1
            visible: false
            property alias color: rectangle.color
            Rectangle {
                id: rectangle
                anchors {
                    fill: parent
                    margins: units.gu(5)
                }
            }
        }
    }
}

As shown in the example above, the push() function can take an Item, Component or URL as input.

Property Documentation

currentPage : Item

This documentation is under development and is subject to change.

The currently active page


depth : int

This documentation is under development and is subject to change.

The current size of the stack


Method Documentation

PageStack::clear()

This documentation is under development and is subject to change.

Deactivate the active page and clear the stack.


PageStack::pop()

This documentation is under development and is subject to change.

Pop the top item from the stack if the stack size is at least 1. Do not do anything if 0 or 1 items are on the stack.


PageStack::push( page, properties)

This documentation is under development and is subject to change.

Push a page to the stack, and apply the given (optional) properties to the page. The pushed page may be an Item, Component or URL.