Description

This is a box which can be given any content and adapts its size accordingly. The default state of the box only show a header line and an icon which indicates if the box is expanded or not. Clicking on the header expands the box and shows the content. The behavior isn't final because detailed specifications are missing.

API properties

bool expanded

True if the box is currently expanded

alias iconRow

Area that can hold a set of icons

alias titleText

Sets the text shown on the header

alias titleTextColor

Sets the color of the text shown on the header

Component detailsComponent

Contains the content to be shown when the box is expanded

Item detailsItem

Stores the contents when created

Signals

expandingChanged

Emitted if the box switches between expanded and not expanded

Parameter:

• bool expanded, indicates if the box is expanded or not

Functions

-

Example

ExpandingBox {
    id: expandingBox

    width: 200
    titleText: "ExpandingBox"
    titleTextColor: "black"
    anchors.centerIn:  parent
    detailsComponent: expandingBoxComponent

    Component {
        id: expandingBoxComponent

        Rectangle {
            id: rect;

            color: "blue";
            height: 30; width: parent.width;
            anchors.centerIn: parent
        }
    }
}