# PageHeader QML Type

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

Import Statement: | import Lomiri.Components 1.3
Inherits: | Header

- List of all members, including inherited members
- 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: LomiriColors.orange
            backgroundColor: "black"
            dividerColor: LomiriColors.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.

Example:

    PageHeader {
        id: header
        title: "Welcome"
        contents: Rectangle {
            anchors.fill: parent
            color: LomiriColors.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 Lomiri 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: "toolkit_input-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.