QmlComponentsButton: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
Line 1: Line 1:
=Button.qml=
h1. Button.qml
 
<code><br />/*
 
This is a very simple button component.
 
Example usage:
 
Button {<br /> text: &quot;Click me!&quot;<br /> font.pixelSize: 20
 
onClicked: console.log(&quot;clicked&amp;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: &quot;lavender&amp;quot; }<br /> GradientStop { id: bottomGrad; position: 1.0; color: &quot;darkblue&amp;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: &quot;white&amp;quot;<br /> style: Text.Raised<br /> }
 
MouseArea {<br /> id: mouseArea<br /> anchors.fill: parent<br /> onClicked: button.clicked()<br /> }
 
states: State {<br /> name: &quot;pressed&amp;quot;; when: mouseArea.pressed &amp;&amp; mouseArea.containsMouse<br /> PropertyChanges { target: topGrad; color: &quot;darkblue&amp;quot; }<br /> PropertyChanges { target: bottomGrad; color: &quot;lightsteelblue&amp;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&quot;)
}

  • /

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&quot; }
GradientStop { id: bottomGrad; position: 1.0; color: "darkblue&quot; }
}

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

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

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