# ToolbarItems QML Type

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

Import Statement: | import Lomiri.Components 1.3
Inherits: | Item

- 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

    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

    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

back : Item

The back button. If it is visible, it will be shown on the left-side of the toolbar. If there is a PageStack with depth greater than 1, the back button will be visible and triggering it will pop the page on top of the stack. If there is no PageStack with depth greater than 1, the back button is hidden by default

The following example shows how to have a classic cancel button that is always visible in the toolbar, instead of the default toolbar-styled back button:

    import QtQuick 2.4
    import Lomiri.Components

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

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

[default] contents : list<Object>

Default property, holds the content which will shown in the toolbar.

locked : bool

The toolbar cannot be opened/closed by bottom-edge swipes. If the ToolbarItems contains no visible Items, it is automatically locked (in closed state).

opened : bool

The toolbar is opened. When the toolbar is not locked, this value is automatically updated when the toolbar is opened/closed by user interaction or by other events (such as changing the active Page).

pageStack : Item

PageStack for the back button. Page will automatically set the pageStack property of its tools.