QmlComponentsButton: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
h1. Button.qml | |||
<code><br />/* | |||
This is a very simple button component. | |||
Example usage: | |||
Button {<br /> text: "Click me!"<br /> font.pixelSize: 20 | |||
onClicked: console.log("clicked&quot;)<br />} | |||
*/ | |||
import Qt 4.7 | |||
Rectangle {<br /> id: button | |||
property alias text: textItem.text<br /> property alias font: textItem.font | |||
signal clicked | |||
width: textItem.width + 40; height: textItem.height + 10<br /> border.width: 1<br /> radius: height/4<br /> smooth: true | |||
gradient: Gradient {<br /> GradientStop { id: topGrad; position: 0.0; color: "lavender&quot; }<br /> GradientStop { id: bottomGrad; position: 1.0; color: "darkblue&quot; }<br /> } | |||
Text {<br /> id: textItem<br /> x: parent.width/2 - width/2; y: parent.height/2 - height/2<br /> font.pixelSize: 18<br /> color: "white&quot;<br /> style: Text.Raised<br /> } | |||
MouseArea {<br /> id: mouseArea<br /> anchors.fill: parent<br /> onClicked: button.clicked()<br /> } | |||
states: State {<br /> name: "pressed&quot;; when: mouseArea.pressed && mouseArea.containsMouse<br /> PropertyChanges { target: topGrad; color: "darkblue&quot; }<br /> PropertyChanges { target: bottomGrad; color: "lightsteelblue&quot; }<br /> PropertyChanges { target: textItem; x: textItem.x + 1; y: textItem.y + 1; explicit: true }<br /> }<br />} | |||
Revision as of 10:20, 24 February 2015
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 }
}
}