QmlComponentsButton: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
(Add "cleanup" tag)
(Decode HTML entity names)
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}


h1. Button.qml
= Button.qml =
 
<code>
<code>
/*
/*
Line 54: Line 53:


states: State {
states: State {
  name: "pressed"; when: mouseArea.pressed &amp;&amp; mouseArea.containsMouse
  name: "pressed"; when: mouseArea.pressed && mouseArea.containsMouse
  PropertyChanges { target: topGrad; color: "darkblue" }
  PropertyChanges { target: topGrad; color: "darkblue" }
  PropertyChanges { target: bottomGrad; color: "lightsteelblue" }
  PropertyChanges { target: bottomGrad; color: "lightsteelblue" }

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

}