Button.qml 1.86 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
import Qt 4.6

Rectangle {
    property var label: "Button"
    signal clicked

    width: 75
    height: 20
    radius: 10
    color: "grey"

    Rectangle {
	  anchors.fill: parent;
	  anchors.leftMargin: 1;
	  anchors.rightMargin: 1;
	  anchors.topMargin: 1;
	  anchors.bottomMargin: 1;

	  color: "#2c2c2c";
	  radius: 9

	  Rectangle {
          id: buttonGradientRectangle
		  anchors.fill: parent;
		  anchors.leftMargin: 1;
		  anchors.rightMargin: 1;
		  anchors.topMargin: 1;
		  anchors.bottomMargin: 1;

		  color: "black";
		  gradient: normalGradient
		  radius: 8;

          Gradient {
              id: pressedGradient
              GradientStop { position: 0.0; color: "#686868" }
              GradientStop { position: 1.0; color: "#8a8a8a" }
          }

          Gradient {
              id: normalGradient
              GradientStop { position: 0.0; color: "#8a8a8a" }
              GradientStop { position: 1.0; color: "#686868" }
          }
	  }
    }

    Text {
        color: "white"
        text: parent.label
        style: "Raised";
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        horizontalAlignment: "AlignHCenter";
        verticalAlignment: "AlignVCenter";
    }

    MouseRegion {
        id: mouseRegion
        anchors.fill: parent
        onReleased: { parent.clicked.emit(); }
    }

    states: [
        State {
            name: "released"
            when: !mouseRegion.pressed

            PropertyChanges {
                target: buttonGradientRectangle
                gradient: normalGradient
            }
        },
        State {
            name: "pressed"
            when: mouseRegion.pressed

            PropertyChanges {
                target: buttonGradientRectangle
                gradient: pressedGradient
            }
        }
    ]
}