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

Import Statement: import Ubuntu.Components 1.3
Since: Ubuntu.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 Ubuntu.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: "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.

head : PageHeadConfiguration

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.