examples/declarative/layouts/Button.qml


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import Qt 4.6

Rectangle { border.color: "black"; color: "steelblue"; radius: 5; width: pix.width + textelement.width + 13; height: pix.height + 10; id: page
    property string text
    property string icon
    signal clicked

    Image { id: pix; x: 5; y:5; source: parent.icon}
    Text { id: textelement; text: page.text; color: "white"; x:pix.width+pix.x+3; anchors.verticalCenter: pix.verticalCenter;}
    MouseRegion{ id:mr; anchors.fill: parent; onClicked: {parent.focus = true; page.clicked()}}

    states:
        State{ name:"pressed"; when:mr.pressed
            PropertyChanges {target:textelement; x: 5}
            PropertyChanges {target:pix; x:textelement.x+textelement.width + 3}
        }

    transitions:
        Transition{
            NumberAnimation { matchProperties:"x,left"; easing:"easeInOutQuad"; duration:200 }
        }
}