Button.qml 1.65 KB
Newer Older
1
import QtQuick 2.1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Rectangle {
    signal clicked

    property string label: "button label"
    property alias image: buttonImage.source
    property int margins: 2

    id: button
    width: 72
    height: 72
    radius: 3
    smooth: true
    border.width: 2

    Text {
        id: buttonLabel
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
21
        anchors.margins: 5
22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
        text: label
        color: "white"
        font.pointSize: 10
    }

    Image {
        id: buttonImage
        anchors.horizontalCenter: button.horizontalCenter
        anchors.top: buttonLabel.bottom
        anchors.margins: margins
        source: image
        fillMode: Image.PreserveAspectFit
        width: image.width
        height: image.height
    }

    signal buttonClick()

    onButtonClick: {
41
        console.log(buttonLabel.text + " clicked calling signal")
42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
        clicked()
    }

    // Highlighting and ativation section
    property color buttonColor: "black"
    property color onHoverbuttonColor: "lightblue"
    property color onHoverColor: "darkblue"
    property color borderColor: "black"

    MouseArea {
        id: buttonMouseArea
        anchors.fill: parent
        onClicked: buttonClick()
        hoverEnabled: true
        onEntered: {
            parent.border.color = onHoverColor
            parent.color = onHoverbuttonColor
        }
        onExited: {
            parent.border.color = borderColor
            parent.color = buttonColor
        }
        onPressed: parent.color = Qt.darker(onHoverbuttonColor, 1.5)
        onReleased: parent.color = buttonColor
    }
    color: buttonColor
    border.color: borderColor
}