Ubuntu.Components PageHeader

The PageHeader shows a title with a leading and a trailing ActionBar that add action buttons to the header.

Import Statement: import Ubuntu.Components 1.3
Inherits: Header
  • Obsolete members


Detailed Description

The colors for foreground, background and the divider are configured in the style, so they may be set using StyleHints:

PageHeader {
    title: "Colors"
    StyleHints {
        foregroundColor: UbuntuColors.orange
        backgroundColor: "black"
        dividerColor: UbuntuColors.slate

See Header properties that are inherited by PageHeader to control the visibility of the header.

Property Documentation

contents : Item

The contents item to display in the header. By default the contents is undefined, and setting it will disable showing of the title and subtitle.


PageHeader {
    id: header
    title: "Welcome"
    contents: Rectangle {
        anchors.fill: parent
        color: UbuntuColors.red
        Label {
            anchors.centerIn: parent
            text: header.title
            color: "white"
extension : Item

Item shown at the bottom of the header. The extension can be any Item, but it must have a height so that the PageHeader correctly adjusts its height for the extension to fit. The extension Item should anchor to the left, right and bottom of its parent so that it will be automatically positioned above the header divider. This property replaces the sections property. Sections can now be added to the header as follows:

PageHeader {
    title: "Header with sections"
    extension: Sections {
        anchors {
            left: parent.left
            leftMargin: units.gu(2)
            bottom: parent.bottom
        model: ["one", "two", "three"]

See Toolbar and Sections.

[read-only] leadingActionBar : ActionBar

The ActionBar for the leading navigation actions. Example:

PageHeader {
    leadingActionBar.actions: [
        Action {
            iconName: "back"
            text: "Back"

The default value of leadingActionBar actions is navigationActions, but that value can be changed to show different actions in front of the title. The leading action bar has only one slot. See ActionBar.

navigationActions : Action

The actions to be shown in the leading action bar. This property is automatically set by the AdaptivePageLayout and other navigation components to configure the back action for the Page. Application developers should not set this property, because the value may be overridden by Ubuntu components that have navigation. Instead, set leadingActionBar’s actions property.

subtitle : string

Displayed under the title. Hidden when the contents Item is set.

title : string

The title to display in the header. Note that the title will be hidden if the contents Item is set.

[read-only] trailingActionBar : ActionBar

The ActionBar with trailing actions. Example:

PageHeader {
    trailingActionBar {
        actions: [
            Action {
                iconName: "settings"
                text: "first"
            Action {
                iconName: "info"
                text: "second"
            Action {
                iconName: "search"
                text: "third"
       numberOfSlots: 2

By default the trailing action bar automatically adapts its number of slots to the available space in the range from 3 to 6. See ActionBar.