PageHeadState QML Type

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

• List of all members, including inherited members

Properties

• actions : Action
• backAction : Action
• contents : Item
• head : PageHeadConfiguration

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
    width: units.gu(40)
    height: units.gu(50)

    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