Header bar that can contain the title and controls for the current view. More...

Import Statement: import Ubuntu.Components 1.3
Since: Ubuntu.Components 1.3


Inherited By:



Detailed Description

The Header can be exposed and hidden by setting the exposed property, and when a flickable is set, the header will scroll together with the flickable and expose or hide when the Flickable movement ends.

import QtQuick 2.4
import Ubuntu.Components 1.3
Item {
    width: units.gu(50)
    height: units.gu(70)
    header: Header {
        width: parent.width
        height: units.gu(6)
        flickable: scrollableContent
        Rectangle {
            // to visualize the header
            anchors.fill: parent
            color: UbuntuColors.blue
    Flickable {
        id: scrollableContent
        anchors.fill: parent
        contentHeight: height * 2
        Label {
            text: "Flick me"

The initial y-value is 0, but scrolling the flickable or setting exposed to false will change the y-value in the range from -height to 0.

Property Documentation

exposed : bool

Exposes and hides the header by animating its y-value between -height and 0 to move it in or out of its parent Item. The value of exposed can be set directly, or it will be automatically updated when the user exposes or hides the Header by scrolling the Header's flickable.

flickable : Flickable

When flickable is set, scrolling vertically in the flickable, or setting the Flickable's y-value will move the header y-position by the same amount as the flickable content movement. When scrolling the flickable, upon release, the header will animate to fully exposed or fully hidden state, depending on whether it was more or less than half exposed when the user stopped moving the flickable.

When flickable is null, the header can be exposed or hidden by setting the exposed property.

The topMargin of the flickable will automatically be updated to always match the height of the header. When changing the flickable, the topMargin of the previous flickable is set to 0.

It is permitted to use a ListView as the value of flickable, but this works well only if the ListView.header property is not set. Alternatively, a Header component may be used for ListView.header, but in that case the flickable of the Header must be null.

read-onlymoving : bool

Indicates whether the header is currently moving, either because contentY of the flickable changes (due to user interaction or by setting it directly), or because the header is animating in or out because the value of exposed was updated.