Contents

Button QML Type

Standard Lomiri button. More...

Import Statement: import Lomiri.Components 1.3
Inherits:

AbstractButton

Properties

Signals

Detailed Description

See also the Design Guidelines on Buttons.

Examples:

Column {
    Button {
        text: "Send"
        onClicked: print("clicked text-only Button")
    }
    Button {
        iconName: "compose"
        gradient: LomiriColors.greyGradient
        onClicked: print("clicked icon-only Button")
    }
    Button {
        iconName: "compose"
        text: "Icon on left"
        iconPosition: "left"
        onClicked: print("clicked text and icon Button")
    }
}

An Action can be used to specify clicked, iconSource and text. Example:

 Item {
     Action {
         id: action1
         text: "Click me"
         onTriggered: print("action!")
         iconName: "compose"
     }
     Button {
         anchors.centerIn: parent
         action: action1
         color: LomiriColors.warmGrey
     }
}

Property Documentation

color : color

The background color of the button.

See also gradient.


font : font

The font used for the button's text.


gradient : Gradient

The gradient used to fill the background of the button.

Standard Lomiri gradients are defined in LomiriColors.

If both a gradient and a color are specified, the gradient will be used.

See also color.


hovered : bool

True if the mouse cursor hovers over the button's mouse area.


iconPosition : string

The position of the icon relative to the text. Options are "left" and "right". The default value is "left".

If only text or only an icon is defined, this property is ignored and the text or icon is centered horizontally and vertically in the button.

Currently this is a string value. We are waiting for support for enums: https://bugreports.qt-project.org/browse/QTBUG-14861


pressed : bool

True if the user presses a mouse button in the button's mouse area.


sensingMargins group

sensingMargins.all : real

sensingMargins.bottom : real

sensingMargins.left : real

sensingMargins.right : real

sensingMargins.top : real

The property group specifies the margins extending the visual area where the touch events are sensed. Positive values mean the area will be extended on the specified direction outside of the visual area, negative values mean the sensing will fall under the component's visual border. All values default to 0. This does not affect mouse sensing area, which only covers the visual area of the component.

Note: If the visual area and the sensing margins are not reaching the 4x4 grid units limit, the component will fall back to these minimum limits. For example, extending a 2x2 grid unit visual component into 5x4 grid units sensing area would look as follows:

AbstractButton {
    width: units.gu(2)
    height: units.gu(2)
    Icon {
        name: "settings"
    }
    sensingArea {
        // no need to set the vertical direction as the minimum of
        // 4 grid units will be taken automatically
        leftMargin: units.gu(1)
        // we only have to add 2 grid units as the width + left margin
        // already gives us 3 grid units out of 5
        rightMargin: units.gu(2)
    }
}

strokeColor : color

If set to a color, the button has a stroke border instead of a filled shape.

This property was introduced in Lomiri.Components 1.1.


Signal Documentation

clicked()

This handler is called when there is a mouse click on the button and the button is not disabled. If action is defined, the action will be triggered.

Note: The corresponding handler is onClicked.


clicked()

This handler is called when there is a mouse click on the button and the button is not disabled. If action is defined, the action will be triggered.

Note: The corresponding handler is onClicked.


pressAndHold()

This handler is called when there is a long press.

Note: The corresponding handler is onPressAndHold.


pressAndHold()

This handler is called when there is a long press.

Note: The corresponding handler is onPressAndHold.