examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

FocusRealm {
    id: groupBox
    width: Math.max(270, subItem.width+40)
    height: Math.max(70, subItem.height+40)

    property var contents
    property var label

    Rect {
        id: wrapper
        x: 5
        y: 10
        radius: 10
        width: groupBox.width-20
        height: groupBox.height-20
        color: "white"
        pen.color: "black"
        Item {
            id: subItem
            qml: groupBox.contents
            anchors.top: parent.top
            anchors.topMargin: 10
            anchors.right: parent.right
            anchors.rightMargin: 10
            width: qmlItem.width
            height: qmlItem.height
        }
    }
    Rect {
        x: 20
        y: 0
        height: text.height
        width: text.width+10
        color: "white"
        Text {
            x: 5
            id: text
            text: label
            font.bold: true
        }
    }
    Rect {
        color: "black"
        anchors.fill: parent
        opacity: parent.focus ? 0 : 0.3
        MouseRegion {
            anchors.fill: parent
            onClicked: { parent.parent.focus=true }
        }
        opacity: Behavior {
            NumericAnimation {
                property: "opacity"
                duration: 250
            }
        }
    }
}