QmlComponentsButton: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
(Decode HTML entity names)
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
=Button.qml=
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
 
= Button.qml =
<code>
/*
 
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 }
}
}

Latest revision as of 17:32, 12 March 2015

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine.
Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

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 }
}

}