Flipable QML Type

Provides a surface that can be flipped. More...

Import Statement: import QtQuick.Studio.Components 1.0
Since: QtQuick.Studio.Components 1.0

Properties

Detailed Description

A Flipable type can be visibly flipped between its front and back sides, like a card. The front and back sides are specified by using any two types inside the Flipable type. The type with the higher z-order is the front side. The opacityFront and opacityBack properties are used to hide and show either the front or back side of the item at a time.

The flipAngle property is used to animate the angle of the type to produce the flipping effect. The xAxis or yAxis property is set to 1 to determine which axis the type is rotated around.

Example Usage

You can use the Flipable component in Qt Design Studio to create an item that can be flipped. In this example, the two sides of the item show ISO 7000 icons.

The QML code looks as follows:

FlipableItem {
    id: flipable
    width: 90
    height: 89
    opacityBack: 0

    IsoItem {
        id: arrowIsoIcon
        color: "#808080"
        anchors.fill: parent
        source: "./iso-icons/iso_grs_7000_4_0251.dat"
    }

    IsoItem {
        id: questionIsoIcon
        color: "#808080"
        anchors.fill: parent
        source: "./iso-icons/iso_grs_7000_4_0435.dat"
    }
}

Property Documentation

flipAngle : Rotation

The flip angle in degrees.

The minimum value is -360 and the maximum value is 360 degrees.


flipped : bool

Whether the type has been flipped.

This property is set to true when the type is flipped.


opacityBack : real

The opacity of the back side of the type.

The opacity can be set between 0 and 1 to hide or show the items on the back side of the type.


opacityFront : real

The opacity of the front side of the type.

The opacity can be set between 0 and 1 to hide or show the items on the front side of the type.


xAxis : int

Whether the type is rotated around the x-axis.

This property is set to 1 to rotate the type around the x-axis.


yAxis : int

Whether the type is rotated around the y-axis.

This property is set to 1 to rotate the type around the y-axis.


Available under certain Qt licenses.
Find out more.