Represents a page on the navigation page stack. More...
import Material 0.2
Properties and Methods

Detailed Description

Represents a page on the navigation page stack.


import QtQuick 2.4
import Material 0.2

Page {
    title: "Application Name"

    actions: [
        Action {
            name: "Print"

            // Icon name from the Google Material Design icon pack
            iconName: "action/print"

    actionBar {
        // Set a custom background color, if you don't want to use
        // the theme's primary color

        // You can also set a custom content view instead of the title
        customContent: TextField {
            placeholderText: "Search..."
            anchors {
                left: parent.left
                right: parent.right
                verticalCenter: parent.verticalCenter


actionBar : alias
No description provided.
actions : Action

The page's actions shown in the action bar.

backAction : Action

The action shown to the left of the title in the action bar. By default, this is a back button which shows when there is a page behind the current page in the page stack. However, you can replace it with your own action, for example, an icon to open a navigation drawer when on your root page.

backgroundColor : color

The background color of the page. Defaults to the global background color defined in Theme::backgroundColor

rightSidebar : Item

A sidebar to show on the right of the page. This will have its own action bar and title, which will split the toolbar into two action bars.

selectedTab : alias

The index of the selected tab. This will be an index from the tabs property.

tabBar : alias

The tab bar displayed below the actions in the action bar. Exposed for additional customization.

tabs : alias

The model to use as the tab items in the action bar. This can either be a Javascript array wih an object for each tab, or it can be a TabView object to display tabs for.

If it is a Javascript array, each object represents one tab, and can either be a simple string (used as the tab title), or an object with title, iconName, and/or iconSource properties.

If it is a TabView component, the title of each Tab object will be used, as well as iconName and iconSource properties if present (as provided by the Material subclass of Tab).

title : string

The title of the page shown in the action bar.


No description provided.
pop(event, force)

Pop this page from the page stack. This does nothing if this page is not the current page on the page stack.

Use force to avoid calling the goBack signal. This is useful if you use the goBack signal to show a confirmation dialog, and want to close the page from your dialog without showing the dialog again. You can also use forcePop() as a shortcut to this behavior.

push(component, properties)

Push the specified component onto the page stack.


signal goBack(varevent)

This signal is emitted when the back action is triggered or back key is released.

By default, the page will be popped from the page stack. To change the default behavior, for example to show a confirmation dialog, listen for this signal using onGoBack and set event.accepted to true. To dismiss the page from your dialog without triggering this signal and re-showing the dialog, call page.forcePop().