Ubuntu.Components.PageHeader

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

• Obsolete members

Properties

• contents : Item
• extension : Item
• leadingActionBar : ActionBar
• navigationActions : Action
• subtitle : string
• title : string
• trailingActionBar : ActionBar

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

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.

Example:

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

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.

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.

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.

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

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

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.