# Toolbar QML Type

Toolbar that can be used as an extension for the edit mode header. Example:. More...

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

- List of all members, including inherited members

## Properties

- leadingActionBar : ActionBar
- trailingActionBar : ActionBar

## Detailed Description

    PageHeader {
        id: editHeader
        property Component delegate: Component {
            AbstractButton {
                id: button
                action: modelData
                width: label.width + units.gu(4)
                height: parent.height
                Rectangle {
                    color: LomiriColors.slate
                    opacity: 0.1
                    anchors.fill: parent
                    visible: button.pressed
                }
                Label {
                    anchors.centerIn: parent
                    id: label
                    text: action.text
                    font.weight: text === "Confirm" ? Font.Normal : Font.Light
                }
            }
        }

        leadingActionBar {
            anchors.leftMargin: 0
            actions: Action {
                text: "Cancel"
                iconName: "close"
            }
            delegate: editHeader.delegate
        }
        trailingActionBar {
            anchors.rightMargin: 0
            actions: Action {
                text: "Confirm"
                iconName: "tick"
            }
            delegate: editHeader.delegate
        }

        extension: Toolbar {
            anchors {
                left: parent.left
                right: parent.right
                bottom: parent.bottom
            }
            trailingActionBar.actions: [
                Action { iconName: "bookmark-new" },
                Action { iconName: "add" },
                Action { iconName: "edit-select-all" },
                Action { iconName: "edit-copy" },
                Action { iconName: "select" }
            ]
            leadingActionBar.actions: Action {
                iconName: "delete"
                text: "delete"
                onTriggered: print("Delete action triggered")
            }
        }
    }

See PageHeader.

## Property Documentation

[read-only] leadingActionBar : ActionBar

The leading ActionBar that should hold at most one action. Recommneded for the delete action. Example:

    Toolbar {
        leadingActionBar.actions: [
            Action {
                iconName: "delete"
                text: "Delete"
                onTriggered: print("delete!")
            }
        ]
    }

See ActionBar.

[read-only] trailingActionBar : ActionBar

The ActionBar with trailing actions. Example:

    Toolbar {
          trailingActionBar.actions: [
              Action { iconName: "bookmark-new" },
              Action { iconName: "add" },
              Action { iconName: "edit-select-all" },
              Action { iconName: "edit-copy" }
          ]
    }

The trailing ActionBar may contain up to 8 actions. Scrolling and support for more than 8 actions will be added in the near future. See ActionBar.