Home · All Classes · All Functions · Overviews

QML Flipable Element Reference

[Inherits Item]

The Flipable item provides a surface that can be flipped. More...

Properties

Detailed Description

Flipable allows you to specify a front and a back and then flip between those sides.

Here's an example that flips between the front and back sides when clicked:

 Flipable {
     id: flipable
     width: 250; height: 250
     property int angle: 0

     transform: Rotation {
         id: rotation
         origin.x: flipable.width/2; origin.y: flipable.height/2
         axis.x: 0; axis.y: 1; axis.z: 0     // rotate around y-axis
         angle: flipable.angle
     }

     front: Image { source: "front.png" }
     back: Image { source: "back.png" }

     states: State {
         name: "back"
         PropertyChanges { target: flipable; angle: 180 }
     }

     transitions: Transition {
         NumberAnimation { properties: "angle"; duration: 2000 }
     }

     MouseArea {
         // change between default and 'back' states
         onClicked: flipable.state = (flipable.state == 'back' ? '' : 'back')
         anchors.fill: parent
     }
 }


Property Documentation

front : Item
back : Item

The front and back sides of the flipable.


read-onlyside : enumeration

The side of the Flippable currently visible. Possible values are Front and Back.



Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies) Trademarks
Qt 4.7.0