QmlComponentsButton

h1. Button.qml

/*

This is a very simple button component.

Example usage:

Button {

text: "Click me!"
font.pixelSize: 20

onClicked: console.log("clicked") }

• /

import Qt 4.7

Rectangle {

id: button

property alias text: textItem.text

property alias font: textItem.font

signal clicked

width: textItem.width + 40; height: textItem.height + 10

border.width: 1
radius: height/4
smooth: true

gradient: Gradient {

GradientStop { id: topGrad; position: 0.0; color: "lavender" }
GradientStop { id: bottomGrad; position: 1.0; color: "darkblue" }
}

Text {

id: textItem
x: parent.width/2 - width/2; y: parent.height/2 - height/2
font.pixelSize: 18
color: "white"
style: Text.Raised
}

MouseArea {

id: mouseArea
anchors.fill: parent
onClicked: button.clicked()
}

states: State {

name: "pressed"; when: mouseArea.pressed && mouseArea.containsMouse
PropertyChanges { target: topGrad; color: "darkblue" }
PropertyChanges { target: bottomGrad; color: "lightsteelblue" }
PropertyChanges { target: textItem; x: textItem.x + 1; y: textItem.y + 1; explicit: true }
}

}