PageHeadState QML Type

PageHeadState is a helper component to make it easier to configure the page header when changing states. More...

Import Statement: import Lomiri.Components 1.3
Since: Lomiri.Components 1.1



Detailed Description

This example shows how to add an action to the header that enables the user to enter search/input mode:

import QtQuick 2.4
import Lomiri.Components 1.3

MainView {
    id: mainView

    Page {
        id: searchPage
        title: "Click the icon"

        Label {
            anchors.centerIn: parent
            text: searchPage.state == "search" ? "search mode" : "normal mode"

        state: "default"
        states: [
            PageHeadState {
                name: "default"
                head: searchPage.head
                actions: Action {
                    iconName: "toolkit_input-search"
                    onTriggered: searchPage.state = "search"
            PageHeadState {
                id: headerState
                name: "search"
                head: searchPage.head
                actions: [
                    Action {
                        iconName: "contact"
                backAction: Action {
                    id: leaveSearchAction
                    text: "back"
                    iconName: "back"
                    onTriggered: searchPage.state = "default"
                contents: TextField {
                    placeholderText: "search..."

Property Documentation

actions : Action

The actions to be shown in the header with this state.

backAction : Action

The back action for this state.

contents : Item

The contents of the header when this state is active.

The head property of the Page which will be the target of the property changes of this State. This property must always be set before the State can be used.