Contents

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

Properties

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.