Page QML Type | Qt Quick Controls 2 5.7

Qt 5.7 | Qt Quick Controls 2 | QML Types | Page QML Type

Qt 5.7.1 Reference Documentation

# Page QML Type

A control that makes it convenient to add a header and footer to a page. More...

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

- List of all members, including inherited members

## Properties

- contentChildren : list<Item>
- contentData : list<Object>
- footer : Item
- header : Item
- 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.0

      ApplicationWindow {
          visible: true

          StackView {
              anchors.fill: parent

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

          footer: TabBar {
              // ...
          }
      }

See also ApplicationWindow and Container Controls.

## Property Documentation

contentChildren : list<Item>

This property holds the list of content children.

The list contains all items that have been declared in QML as children of the page.

Note: Unlike `contentData`, `contentChildren` does not include non-visual QML objects.

See also Item::children and contentData.

[default] contentData : list<Object>

This property holds the list of content data.

The list contains all objects that have been declared in QML as children of the container.

Note: Unlike `contentChildren`, `contentData` does include non-visual QML objects.

See also Item::data and contentChildren.

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 or TabBar as a page footer sets the respective ToolBar::position or TabBar::position property automatically 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 or TabBar as a page header sets the respective ToolBar::position or TabBar::position property automatically to `Header`.

See also footer and ApplicationWindow::header.

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