Ubuntu.Components.PageHeadConfiguration

Page.head is used to configure the header for a Page. More...

Properties

• actions : list<Action>
• backAction : Action
• contents : Item
• foregroundColor : color
• locked : bool
• preset : string
• sections : PageHeadSections
• title : string
• visible : bool

Detailed Description

For examples how to use Page.head, see Page.

Property Documentation

List of actions to show in the header.

Example:

Page {
title: "Custom header actions"
head.actions: [
Action {
iconName: "save"
text: i18n.tr("Save")
},
Action {
iconName: "add"
text: i18n.tr("Add")
}
]
}

Overrides the default PageStack back button and the Tabs drawer button in the header.

Example:

Page {
title: "Back Action Page"
head.backAction: Action {
iconName: "close"
onTriggered: {
console.log("Run custom back action")
}
}
}

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.

The color of the text and icons.

When the visible property. An unlocked header automatically shows and hides if the Page has a flickable in which the user scrolls up or down. Default value: false

This QML property was introduced in Qt 1.3.

Choose a preset for the header visuals and behavior. The default is an empty string "". By setting this to "select", title will be hidden and actions will be represented by icons with a label.

Example:

import QtQuick 2.4
import Ubuntu.Components 1.2
MainView {
id: mainView
width: units.gu(40)
height: units.gu(50)
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"
}
}
}

Defines the sections in the page header divider.

The title to show in the header. This is automatically copied from the Page title.

This QML property was introduced in Qt 1.3.

Update the value of the visible property to show or hide the header. This works both when the header is locked and unlocked. An unlocked header can also become visible or hidden when the user scrolls the active Page's flickable. The value of the visible property will be updated at the end of the showing/hiding animation of the header.

This QML property was introduced in Qt 1.3.