ToolbarButton QML Type

An ActionItem that represents a button in the toolbar. ToolbarButtons should be included in ToolbarItems to define the tools of a Page. The behavior and look of the toolbar button can be specified by setting an Action for the button, or by setting the other properties inherited by the ActionItem. More...

Import Statement: import Ubuntu.Components 1.2
Inherits:

ActionItem

Properties

Signals

Methods

Detailed Description

Example of different ways to define the toolbar button:

import QtQuick 2.4
import Ubuntu.Components 1.2

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

    Action {
        id: action1
        text: "action 1"
        iconName: "compose"
        onTriggered: print("one!")
    }

    Page {
        title: "test page"

        Label {
            anchors.centerIn: parent
            text: "Hello, world"
        }

        tools: ToolbarItems {
            // reference to an action:
            ToolbarButton {
                action: action1
            }

            // define the action:
            ToolbarButton {
                action: Action {
                    text: "Second action"
                    iconName: "add"
                    onTriggered: print("two!")
                }
                // override the text of the action:
                text: "action 2"
            }

            // no associated action:
            ToolbarButton {
                iconName: "cancel"
                text: "button"
                onTriggered: print("three!")
            }
        }
    }
}

See ToolbarItems for more information on how to use ToolbarButton.

Property Documentation

action : Action

The Action associated with this ActionItem. If action is set, the values of the Action properties are copied to the values of the ActionItem properties.


activeFocusOnPress : bool

The property specifies whether the StyledItem can gain focus on a mouse press/touch or not. When the value is true, the focus will be set on the component when the mouse is pressed over it or touched. However if one of the component's ancestor StyledItem or derived is having the property value false, the focus will not be gained automatically.

In the following example the TextField will stay focused when clicked on the red rectangle.

import QtQuick 2.4
import Ubuntu.Components 1.2

Column {
    width: units.gu(50)
    height: units.gu(100)

    StyledItem {
        objectName: "passiveScope"
        width: parent.width
        height: units.gu(30)
        Rectangle {
            anchors.fill: parent
            color: "red"
            StyledItem {
                objectName: "activeScope"
                activeFocusOnPress: true
                anchors.fill: parent
            }
        }
    }

    TextField {
        id: input
        text: "The input stays focus even if red box is clicked"
    }

    Component.onCompleted: input.forceActiveFocus()

    Connections {
        target: window
        onActiveFocusItemChanged: console.debug("focus on", window.activeFocusItem)
    }
}

The default value is false.

This QML property was introduced in Ubuntu.Components 1.1.


iconName : string

The icon associated with the actionItem in the suru icon theme. Default value: action.iconName.

Note: The complete list of icons available in Ubuntu is not published yet. For now please refer to the folders where the icon themes are installed:

These 2 separate icon themes will be merged soon.

If both iconSource and iconName are defined, iconName will be ignored.


iconSource : url

The image associated with the actionItem. Default value: action.iconSource.

This is the URL of any image file If both iconSource and iconName are defined, iconName will be ignored.


style : Component

Component instantiated immediately and placed below everything else.


text : string

The title of the actionItem. Default value: action.text


Signal Documentation

triggered(var value)

Called when the actionItem is triggered.


Method Documentation

trigger( value)

Trigger this action item if it is enabled.