diff options
| author | Roberto Raggi <roberto.raggi@nokia.com> | 2009-04-27 10:32:25 (GMT) |
|---|---|---|
| committer | Roberto Raggi <roberto.raggi@nokia.com> | 2009-04-27 10:32:25 (GMT) |
| commit | e793ab29e651a7b07354224a82343d66c265f361 (patch) | |
| tree | 066b8f7207132bfbd1f9fe039c723ccd75c78412 /examples/declarative/slideswitch | |
| parent | 40983ad8b9209c41124c93b8a3c1517f93ae17d2 (diff) | |
| download | Qt-e793ab29e651a7b07354224a82343d66c265f361.zip Qt-e793ab29e651a7b07354224a82343d66c265f361.tar.gz Qt-e793ab29e651a7b07354224a82343d66c265f361.tar.bz2 | |
Converted the examples.
Diffstat (limited to 'examples/declarative/slideswitch')
| -rw-r--r-- | examples/declarative/slideswitch/Switch.qml | 104 | ||||
| -rw-r--r-- | examples/declarative/slideswitch/display.qml | 11 |
2 files changed, 80 insertions, 35 deletions
diff --git a/examples/declarative/slideswitch/Switch.qml b/examples/declarative/slideswitch/Switch.qml index 90e6e64..f62e4b6 100644 --- a/examples/declarative/slideswitch/Switch.qml +++ b/examples/declarative/slideswitch/Switch.qml @@ -1,6 +1,12 @@ -<Item id="Switch" width="{Groove.width}" height="{Groove.height}"> - <properties><Property name="on"/></properties> - <Script> +Item { + id: Switch + width: Groove.width + height: Groove.height + properties: Property { + name: "on" + } + Script { + function toggle() { if(Switch.state == "On") Switch.state = "Off"; @@ -21,32 +27,66 @@ toggle(); } - </Script> - <Image id="Groove" src="background.svg"/> - <MouseRegion anchors.fill="{Groove}" onClicked="toggle()"/> - <Image id="Knob" src="knob.svg" x="1" y="2"/> - <MouseRegion anchors.fill="{Knob}" - onClicked="toggle()" - onReleased="if (!isClick) dorelease()" - drag.target="{Knob}" - drag.axis="x" - drag.xmin="1" - drag.xmax="78"/> - - <states> - <State name="On"> - <SetProperty target="{Knob}" property="x" value="78" /> - <SetProperty target="{Switch}" property="on" value="true" /> - </State> - <State name="Off"> - <SetProperty target="{Knob}" property="x" value="1" /> - <SetProperty target="{Switch}" property="on" value="false" /> - </State> - </states> - - <transitions> - <Transition> - <NumericAnimation properties="x" easing="easeInOutQuad" duration="200"/> - </Transition> - </transitions> -</Item> + + } + Image { + id: Groove + src: "background.svg" + } + MouseRegion { + anchors.fill: Groove + onClicked: { toggle() } + } + Image { + id: Knob + src: "knob.svg" + x: 1 + y: 2 + } + MouseRegion { + anchors.fill: Knob + onClicked: { toggle() } + onReleased: { if (!isClick) dorelease() } + drag.target: Knob + drag.axis: "x" + drag.xmin: 1 + drag.xmax: 78 + } + states: [ + State { + name: "On" + SetProperty { + target: Knob + property: "x" + value: 78 + } + SetProperty { + target: Switch + property: "on" + value: true + } + }, + State { + name: "Off" + SetProperty { + target: Knob + property: "x" + value: 1 + } + SetProperty { + target: Switch + property: "on" + value: false + } + } + ] + transitions: [ + Transition { + NumericAnimation { + properties: "x" + easing: "easeInOutQuad" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/slideswitch/display.qml b/examples/declarative/slideswitch/display.qml index b62422c..cea89b6 100644 --- a/examples/declarative/slideswitch/display.qml +++ b/examples/declarative/slideswitch/display.qml @@ -1,3 +1,8 @@ -<Rect color="white" width="150" height="150"> - <Switch anchors.centeredIn="{parent}"/> -</Rect> +Rect { + color: "white" + width: 150 + height: 150 + Switch { + anchors.centeredIn: parent + } +} |