Contents

PageHeadConfiguration

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

Import Statement: import Ubuntu.Components 1.1
Since: Ubuntu.Components 1.1
Inherits:

QtObject

Properties

Detailed Description

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

Property Documentation

actions : Action

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")
        }
    ]
}

backAction : Action

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")
        }
    }
}

contents : Item

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.


foregroundColor : color

The color of the text and icons.


preset : string

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

Example:

import QtQuick 2.2
import Ubuntu.Components 1.1

MainView {
    id: mainView
    width: units.gu(40)
    height: units.gu(50)
    useDeprecatedToolbar: false

    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"
        }
    }
}

read-onlysections : PageHeadSections

Defines the sections in the page header divider.