Ubuntu.Components.PageHeadState

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

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

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

The back action for this state.

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.