summaryrefslogtreecommitdiffstats
path: root/examples/declarative/slideswitch/content/Switch.qml
blob: e16198d216f966dce4b99587675e22ddd76a4e81 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
//![0]
import Qt 4.7

Item {
    id: toggleswitch
    width: background.width; height: background.height

//![1]
    property bool on: false
//![1]

//![2]
    function toggle() {
        if (toggleswitch.state == "on")
            toggleswitch.state = "off";
        else toggleswitch.state = "on";
    }
//![2]

//![3]
    function dorelease() {
        if (knob.x == 1) {
            if (toggleswitch.state == "off") return;
        }
        if (knob.x == 78) {
            if (toggleswitch.state == "on") return;
        }
        toggle();
    }
//![3]

//![4]
    Image {
        id: background; source: "background.svg"
        MouseArea { anchors.fill: parent; onClicked: toggle() }
    }
//![4]

//![5]
    Image {
        id: knob; source: "knob.svg"; x: 1; y: 2

        MouseArea {
            anchors.fill: parent
            drag.target: knob; drag.axis: "XAxis"; drag.minimumX: 1; drag.maximumX: 78
            onClicked: toggle()
            onReleased: dorelease()
        }
    }
//![5]

//![6]
    states: [
        State {
            name: "on"
            PropertyChanges { target: knob; x: 78 }
            PropertyChanges { target: toggleswitch; on: true }
        },
        State {
            name: "off"
            PropertyChanges { target: knob; x: 1 }
            PropertyChanges { target: toggleswitch; on: false }
        }
    ]
//![6]

//![7]
    transitions: Transition {
        NumberAnimation { properties: "x"; easing.type: "InOutQuad"; duration: 200 }
    }
//![7]
}
//![0]