ToolbarItems QML Type

Row of Items to be placed in a toolbar. More...

• List of all members, including inherited members

Properties

• back : Item
• contents : list<Object>
• locked : bool
• opened : bool
• pageStack : Item

Detailed Description

DEPRECATED: DO NOT USE THIS. USE head.actions IN Page INSTEAD.

Each Page has a tools property that can be set to change the tools of toolbar supplied by MainView when the Page is active. Each ToolbarItems consists of a set of Items and several properties that specify the behavior of the toolbar when the Page is active.

When a Page is used inside a MainView, Tabs or PageStack, the toolbar will automatically show the tools of the active Page. When the active Page inside the Tabs or PageStack is updated by changing the selected Tab or by pushing/popping a Page on the PageStack, the toolbar will automatically hide, except if the new active Page has the locked property set.

It is recommended to use ToolbarButton inside the ToolbarItems to define the buttons that will be visible to the user:

import QtQuick 2.4
import Lomiri.Components 1.3

MainView {
    width: units.gu(50)
    height: units.gu(50)

    Page {
        title: "Tools example"
        Label {
            anchors.centerIn: parent
            text: "Custom back button\nToolbar locked"
        }
        tools: ToolbarItems {
            ToolbarButton {
                action: Action {
                    text: "button"
                    iconName: "compose"
                    onTriggered: print("success!")
                }
            }
            locked: true
            opened: true
        }
    }
}

However, it is possible to include non-ToolbarButton Items inside ToolbarItems, and to mix ToolbarButtons and other Items (for example standard Buttons). ToolbarButtons automatically span the full height of the toolbar, and other Items you will probably want to center vertically:

import QtQuick 2.4
import Lomiri.Components 1.3

MainView {
    width: units.gu(50)
    height: units.gu(50)

    Page {
        title: "Tools example"
        Label {
            anchors.centerIn: parent
            text: "buttons!"
        }
        tools: ToolbarItems {
            ToolbarButton {
                action: Action {
                    text: "toolbar"
                    iconName: "compose"
                    onTriggered: print("success!")
                }
            }
            Button {
                anchors.verticalCenter: parent.verticalCenter
                text: "standard"
            }
        }
    }
}

Property Documentation

import QtQuick 2.4
import Lomiri.Components 1.3

MainView {
    width: units.gu(50)
    height: units.gu(50)

    Page {
        title: "Custom back button"
        tools: ToolbarItems {
            back: Button {
                text: "cancel"
            }
        }
    }
}