UbuntuUserInterfaceToolkit.ubuntu-layouts6

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.

src="https://assets.ubuntu.com/v1/607c135f-layout7.png" alt="" />

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)
}
}
}