Add a basic Switch control

This is a very simple switch. I left out text label as this is
very mobile oriented. A clicked signal is also debatable
as you dont really click on a switch.

Change-Id: I84269297cba48f0e81af8f25af5b97acadecdd6a
Reviewed-by: J-P Nurmi <jpnurmi@digia.com>

1 files changed, 58 insertions, 2 deletions

diff --git a/examples/quick/controls/touch/content/ButtonPage.qml b/examples/quick/controls/touch/content/ButtonPage.qml
index 95b99a83..8cf1dad5 100644
--- a/examples/quick/controls/touch/content/ButtonPage.qml
+++ b/examples/quick/controls/touch/content/ButtonPage.qml
@@ -71,13 +71,11 @@ Item {
         anchors.centerIn: parent
 
         Button {
-            anchors.margins: 20
             text: "Press me"
             style: touchStyle
         }
 
         Button {
-            anchors.margins: 20
             style: touchStyle
             text: "Press me too"
         }
@@ -89,6 +87,16 @@ Item {
             onClicked: if (stackView) stackView.pop()
         }
 
+        Row {
+            spacing: 20
+            Switch {
+                style: switchStyle
+            }
+            Switch {
+                style: switchStyle
+            }
+        }
+
     }
 
     Component {
@@ -117,4 +125,52 @@ Item {
             }
         }
     }
+
+    Component {
+        id: switchStyle
+        SwitchStyle {
+
+            groove: Rectangle {
+                implicitHeight: 50
+                implicitWidth: 152
+                Rectangle {
+                    anchors.top: parent.top
+                    anchors.left: parent.left
+                    anchors.bottom: parent.bottom
+                    width: parent.width/2 - 2
+                    height: 20
+                    anchors.margins: 2
+                    color: control.checked ? "#468bb7" : "#222"
+                    Behavior on color {ColorAnimation {}}
+                    Text {
+                        font.pixelSize: 23
+                        color: "white"
+                        anchors.centerIn: parent
+                        text: "ON"
+                    }
+                }
+                Item {
+                    width: parent.width/2
+                    height: parent.height
+                    anchors.right: parent.right
+                    Text {
+                        font.pixelSize: 23
+                        color: "white"
+                        anchors.centerIn: parent
+                        text: "OFF"
+                    }
+                }
+                color: "#222"
+                border.color: "#444"
+                border.width: 2
+            }
+            handle: Rectangle {
+                width: parent.parent.width/2
+                height: control.height
+                color: "#444"
+                border.color: "#555"
+                border.width: 2
+            }
+        }
+    }
 }