Page QML Type

Styled page control with support for a header and footer. More...

Import Statement:	import QtQuick.Controls 2.0
Since:	Qt 5.7
Inherits:	Pane

• List of all members, including inherited members

Properties

• footer : Item
• header : Item
• implicitFooterHeight : real
• implicitFooterWidth : real
• implicitHeaderHeight : real
• implicitHeaderWidth : real
• title : string

Detailed Description

Page is a container control which makes it convenient to add a header and footer item to a page.

The following example snippet illustrates how to use a page-specific toolbar header and an application-wide tabbar footer.

import QtQuick.Controls 2.12

ApplicationWindow {
    visible: true

    StackView {
        anchors.fill: parent

        initialItem: Page {
            header: ToolBar {
                // ...
            }
        }
    }

    footer: TabBar {
        // ...
    }
}

See also ApplicationWindow, Container Controls, and Focus Management in Qt Quick Controls.

Property Documentation

footer : Item

This property holds the page footer item. The footer item is positioned to the bottom, and resized to the width of the page. The default value is null.

Note: Assigning a ToolBar, TabBar, or DialogButtonBox as a page footer automatically sets the respective ToolBar::position, TabBar::position, or DialogButtonBox::position property to Footer.

See also header and ApplicationWindow::footer.

header : Item

This property holds the page header item. The header item is positioned to the top, and resized to the width of the page. The default value is null.

Note: Assigning a ToolBar, TabBar, or DialogButtonBox as a page header automatically sets the respective ToolBar::position, TabBar::position, or DialogButtonBox::position property to Header.

See also footer and ApplicationWindow::header.

[read-only, since QtQuick.Controls 2.5 (Qt 5.12)] implicitFooterHeight : real

This property holds the implicit footer height.

The value is equal to footer && footer.visible ? footer.implicitHeight : 0.

This property was introduced in QtQuick.Controls 2.5 (Qt 5.12).

See also implicitFooterWidth and implicitHeaderHeight.

[read-only, since QtQuick.Controls 2.5 (Qt 5.12)] implicitFooterWidth : real

This property holds the implicit footer width.

The value is equal to footer && footer.visible ? footer.implicitWidth : 0.

This property was introduced in QtQuick.Controls 2.5 (Qt 5.12).

See also implicitFooterHeight and implicitHeaderWidth.

[read-only, since QtQuick.Controls 2.5 (Qt 5.12)] implicitHeaderHeight : real

This property holds the implicit header height.

The value is equal to header && header.visible ? header.implicitHeight : 0.

This property was introduced in QtQuick.Controls 2.5 (Qt 5.12).

See also implicitHeaderWidth and implicitFooterHeight.

[read-only, since QtQuick.Controls 2.5 (Qt 5.12)] implicitHeaderWidth : real

This property holds the implicit header width.

The value is equal to header && header.visible ? header.implicitWidth : 0.

This property was introduced in QtQuick.Controls 2.5 (Qt 5.12).

See also implicitHeaderHeight and implicitFooterWidth.

title : string

This property holds the page title.

The title is often displayed at the top of a page to give the user context about the page they are viewing.

ApplicationWindow {
    visible: true
    width: 400
    height: 400

    header: Label {
        text: view.currentItem.title
        horizontalAlignment: Text.AlignHCenter
    }

    SwipeView {
        id: view
        anchors.fill: parent

        Page {
            title: qsTr("Home")
        }
        Page {
            title: qsTr("Discover")
        }
        Page {
            title: qsTr("Activity")
        }
    }
}