Layouts - Overlay items in an item host

There is one more thing you can do with ItemLayout container, which is to define overlay items for certain hosted items on certain layouts. If an ItemLayout has child elements defined, the hosted item will be stacked as topmost element, so all the child elements declared in ItemLayout will be rendered as overlay on top of the hosted item.

ConditionalLayout {
    name: "row"
    when: layouts.width > units.gu(50)
    Row {
        anchors.fill: parent
        ItemLayout {
            item: "red"
            width: parent.width / 2
            height: units.gu(20)

            Rectangle {
                anchors{
                    left: parent.left
                    right: parent.right
                    bottom: parent.bottom
                    margins: units.dp(3)
                }
                radius: units.dp(1)
                height: units.gu(8)
                color: "#bbbbbb88"
                Label {
                    anchors.centerIn: parent
                    text: "Overlay item"
                }
            }
        }
        ItemLayout {
            item: "green"
            width: parent.width / 2
            height: units.gu(20)
        }
    }
}