- Qt 6.6
- Qt Quick Controls
- QML Types
- Page
- Qt 6.6.2 Reference Documentation

# Page QML Type

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

Import Statement: | import QtQuick.Controls
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.

Items declared as children of a Page are:

- automatically parented to the Page's contentItem. Items created dynamically need to be explicitly parented to the contentItem.
- not automatically positioned or resized.

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

     import QtQuick.Controls
     import QtQuick.Layouts

     ApplicationWindow {
         visible: true

         StackView {
             anchors.fill: parent

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

                 ColumnLayout {
                     anchors.fill: parent
                     // ...
                 }
             }
         }

         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.

Page does not render the title itself, but instead relies on the application to do so. For example:

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