PageHeadConfiguration
Page.head is used to configure the header for a Page. More...
Import Statement: | import Ubuntu.Components 1.1 |
Since: | Ubuntu.Components 1.1 |
Inherits: |
Properties
- actions : Action
- backAction : Action
- contents : Item
- foregroundColor : color
- preset : string
- sections : PageHeadSections
Detailed Description
For examples how to use Page.head, see Page.
Property Documentation
actions : Action |
backAction : Action |
contents : Item |
Set this property to show this Item in the header instead of the title. Use a TextField here for implementing search in header.
The parent of this Item will be binded while the Page is active. The header contents will automatically be anchored to the left and vertically centered inside the header.
Example:
Page { title: "Invisible title" head.contents: Rectangle { color: UbuntuColors.orange height: units.gu(5) width: parent ? parent.width - units.gu(2) : undefined } }
See PageHeadState for an example that shows how search mode can be implemented.
foregroundColor : color |
The color of the text and icons.
preset : string |
Choose a preset for the header visuals and behavior. The default is an empty string "". By setting this to "selection", title will be hidden and actions will be represented by icons with a label.
Example:
import QtQuick 2.2 import Ubuntu.Components 1.1 MainView { id: mainView width: units.gu(40) height: units.gu(50) useDeprecatedToolbar: false Page { id: page title: "Demo" state: "default" states: [ PageHeadState { name: "default" head: page.head actions: [ Action { iconName: "contact" text: "Contact" } ] }, State { id: selectState name: "select" property Action leaveSelect: Action { iconName: "back" text: "Back" onTriggered: page.state = "default" } property list<Action> actions: [ Action { iconName: "select" text: "Select All" }, Action { iconName: "delete" text: "Delete" } ] PropertyChanges { target: page.head backAction: selectState.leaveSelect actions: selectState.actions preset: "select" } } ] Label { anchors.centerIn: parent text: "Use back button to leave selection mode." visible: page.state == "select" } Button { anchors.centerIn: parent onClicked: page.state = "select" visible: page.state != "select" text: "selection mode" } } }
read-onlysections : PageHeadSections |
Defines the sections in the page header divider.