Differences

This shows you the differences between two versions of the page.

--- qt-quick-for-designers-1:components [2013/06/22 03:20] – created mithat
+++ qt-quick-for-designers-1:components [2013/06/22 04:03] – mithat
@@ Line 46: / Line 46: @@
 </file>
     * ''ButtonSimple.qml'' and ''reusing-buttonsimple.qml'' must be in the same directory.
+===== Properties =====
+  * You can declare a ''property'' do expose something inside a Component to the outside:
+<file javascript ButtonSimple2.qml>
+import QtQuick 1.0
+Image {
+    id: button
+    source: "images/button.png"
+    property string labelText
+    Text {
+        id: label
+        text: labelText
+        color: "white"
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        anchors.topMargin: 6
+    }
+}</file>
+<file javascript reusing-buttonsimple2.qml>
+import QtQuick 1.0
+Item {
+    id: myItem
+    width: 400
+    height: 400
+    ButtonSimple2 {
+        id: myButton
+        labelText: "Hey you!"
+        anchors.horizontalCenter: myItem.horizontalCenter
+        anchors.bottom: myItem.bottom
+        anchors.bottomMargin: 20
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                parent.labelText = "Thanks!";
+            }
+        }
+    }
+}</file>
+  * Note that the MouseArea has been moved out of ''ButtonSimple2.qml''.