Minimize Groupbox

[HTWAMD]

Hey,

is there a way to minimize a groupbox and hide all the content inside? To show the content I want something like a drop-down button.

[p3c0]

@HTWAMD There is visible property if thats what you are trying to do.

[mrjj]

well, if you have it in a layout
You can set minimumHeight to adjust its size and show/hide its widgets but it will not work
much like a dropdown button.

More like area you collapse / expand

[Julien B]

Hello @HTWAMD,

Maybe Expander Control in QML is that you are looking for?

In the example below you can click on the black rectangle to collapse/expand the group box

Rectangle {
    id: rect1
    width: groupBox.width; height: groupBox.height
    y: 64
    x: 64
    color: "grey"
    anchors.top: rect2.bottom
    anchors.left: rect2.left
    clip: true
    GroupBox {
        id: groupBox
        //title: qsTr("Synchronize")
        ColumnLayout {
            anchors.fill: parent
            CheckBox { text: qsTr("E-mail") }
            CheckBox { text: qsTr("Calendar") }
            CheckBox { text: qsTr("Contacts") }
        }
    }

    Behavior on height { NumberAnimation { duration: 250 } }
}
Rectangle {
    id: rect2
    width: groupBox.width; height: 64
    y: 64
    x: 64
    color: "black"
    Text{
        color: "white"
        text: "synchronize"
        anchors.centerIn: parent
    }


    MouseArea {
        anchors.fill: parent
        onClicked:
            if (rect1.height === 0)
                rect1.height = groupBox.height
            else
                rect1.height = 0
    }
}