Page QML Type
A page is the basic Item that must be used inside the MainView, PageStack and Tabs. Anchors and height of a Page are automatically determined to align with the header of the MainView, but can be overridden. More...
Import Statement: | import Ubuntu.Components 1.2 |
Properties
Detailed Description
MainView provides a header for Pages it includes. The text and actions of the header are determined by the title and head properties of the page:
import QtQuick 2.4 import Ubuntu.Components 1.2 MainView { width: units.gu(48) height: units.gu(60) Page { title: i18n.tr("Example page") Label { anchors.centerIn: parent text: i18n.tr("Hello world!") } head.actions: [ Action { iconName: "search" text: i18n.tr("Search") }, Action { iconName: "contacts" text: i18n.tr("Contacts") } ] } }
See MainView for more examples on how to use the header. Advanced navigation structures can be created by adding Pages to a PageStack or Tabs.
The Page automatically anchors to the left and bottom of its parent. The width of the Page will be the full width of its parent MainView or PageStack or Tab, and the height will adapt to leave space for the header when needed. It is possible to use a Page inside a Loader, but in that case do not set the anchors or size of the Loader so that the Page can control its width and height.
Property Documentation
actions : list<Action> |
flickable : Flickable |
Optional flickable that controls the header. This property is automatically set to the first child of the page that is Flickable and anchors to the top of the page or fills the page. For example:
import QtQuick 2.4 import Ubuntu.Components 1.2 MainView { width: units.gu(30) height: units.gu(50) Page { id: page title: "example" //flickable: null // uncomment for a fixed header Flickable { id: content anchors.fill: parent contentHeight: units.gu(70) Label { text: "hello" anchors.centerIn: parent } } } }
In this example, page.flickable will automatically be set to content because it is a Flickable and it fills its parent. Thus, scrolling down in the Flickable will automatically hide the header.
Set this property to null to avoid automatic flickable detection, which disables hiding of the header by scrolling in the Flickable. In cases where a flickable should control the header, but it is not automatically detected, the flickable property can be set.
read-onlyhead : PageHeadConfiguration |
Configuration of the header for this page.