Page QML Type

A page is the basic Item that represents a single view in an Lomiri application. It is recommended to use the Page inside the MainView or AdaptivePageLayout. More...

Import Statement: import Lomiri.Components 1.3

Properties

Detailed Description

MainView provides a header for Pages it includes if no header property was set. However, the application header is deprecated and it is recommended to set the header property instead.

Anchors and height of a Page are automatically determined to align with the header of the MainView, but can be overridden. Page contents does not automatically leave space for the Page header, so this must be taken into account when anchoring the contents of the Page.

Example:

import QtQuick 2.4
import Lomiri.Components 1.3

MainView {
    width: units.gu(48)
    height: units.gu(60)

    Page {
        header: PageHeader {
            id: pageHeader
            title: i18n.tr("Example page")

            trailingActionBar.actions: [
                Action {
                    iconName: "toolkit_input-search"
                    text: i18n.tr("Search")
                }
            ]
        }

        Label {
            anchors {
                horizontalCenter: parent.horizontalCenter
                top: pageHeader.bottom
                topMargin: units.gu(5)
            }
            text: i18n.tr("Hello world!")
        }
    }
}

Property Documentation

[read-only] actionContext : ActrionContext

The action context of the page.

This property was introduced in Lomiri.Components 1.3.


header : Item

The header property for this page. Setting this property will reparent the header to the page and disable the MainView's application header.

Page {
    id: page
    header: PageHeader {
        title: "Page with header"
        trailingActionBar.actions: [
            Action { iconName: "settings" },
            Action { iconName: "info" }
        ]
        flickable: myFlickable
    }
}

To avoid Page content being occluded by the header, the contents of the Page should anchor to the bottom of the header. When the Page contents is flickable, the contents does not need to be anchored to the header, but it is recommended to use a PageHeader or Header component as the Page header, and set its Header::flickable property so that the Flickable gets a top-margin that leaves enough space for the header.

This property was introduced in Lomiri.Components 1.3.

See also PageHeader and Header.