Page QML Type

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

Import Statement: import QtQuick.Controls
Inherits:

Pane

Properties

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

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.


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

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.


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

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.


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

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.


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

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