diff options
Diffstat (limited to 'examples/declarative')
4 files changed, 154 insertions, 29 deletions
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4a/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4a/RemoveButton.qml new file mode 100644 index 0000000..ce8459d --- /dev/null +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4a/RemoveButton.qml @@ -0,0 +1,117 @@ +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 +//! [script] + resources: [ + Script { + function toggle() { + if (removeButton.state == 'opened') { + removeButton.state = ''; + } else { + removeButton.state = 'opened'; + } + } + + } + ] +//! [script] +//! [mouse region] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/trash.png" + opacity: 1 + MouseRegion { + id: trashMouseRegion + anchors.fill: parent + } + Connection { + sender: trashMouseRegion + signal: clicked() + script: { + toggle() + } + } + } +//! [mouse region] + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/cancel.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/ok.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: AlignHCenter + text: "Remove" + opacity: 0 + } +//! [states] + states: [ + State { + name: "opened" + SetProperty { + target: removeButton + property: "width" + value: 230 + } + SetProperty { + target: text + property: "opacity" + value: 1 + } + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: trashIcon + property: "opacity" + value: 0 + } + } + ] +//! [states] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1b/BlueRect.qml b/examples/declarative/tutorials/contacts/2_Reuse/1b/BlueRect.qml new file mode 100644 index 0000000..92893f6 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/1b/BlueRect.qml @@ -0,0 +1,33 @@ +//! [all] +Rect { + width: 100 + height: 100 + color: "blue" + resources: [ + Component { + id: redRectangle + Rect { + width: 30 + height: 30 + color: "red" + radius: 5 + } + } + ] + ComponentInstance { + component: redRectangle + anchors.right: parent.right + anchors.top: parent.top + } + ComponentInstance { + component: redRectangle + anchors.left: parent.left + anchors.top: parent.top + } + ComponentInstance { + component: redRectangle + anchors.left: parent.left + anchors.bottom: parent.bottom + } +} +//! [all] diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml deleted file mode 100644 index 1366548..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml +++ /dev/null @@ -1,29 +0,0 @@ -import "lib" -Item { - id: contactField - clip: true - width: 230 - height: 30 - RemoveButton { - id: removeButton - anchors.right: parent.right - anchors.top: parent.top - anchors.bottom: parent.bottom - } - Text { - id: fieldText - width: contactField.width-80 - anchors.right: removeButton.left - anchors.rightMargin: 10 - anchors.verticalCenter: parent.verticalCenter - font.bold: true - color: "black" - text: 123123 - } - Image { - source: "../../shared/pics/phone.png" - anchors.right: fieldText.left - anchors.rightMargin: 10 - anchors.verticalCenter: parent.verticalCenter - } -} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml index 45b1899..dc49d8e 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml @@ -62,10 +62,12 @@ Rect { anchors.verticalCenter: parent.verticalCenter source: "../../shared/pics/ok.png" opacity: 0 +//! [use signal] MouseRegion { anchors.fill: parent onClicked: { toggle(); removeButton.confirmed.emit() } } +//! [use signal] } Text { id: text @@ -83,11 +85,13 @@ Rect { states: [ State { name: "opened" +//! [use width] SetProperty { target: removeButton property: "width" value: removeButton.expandedWidth } +//! [use width] SetProperty { target: text property: "opacity" |