Skip to main content

Overlay

Layers the given components in front of this component.

modifier Overlay
import { Overlay, Text, Rectangle } from ui

export var main = Rectangle(color: Color(0xFF123456)) with {
    Overlay {
        Text("Hello, world!")
    }
}

Constructors​

(alignment:​children)​

alignment: Alignment = Alignment.center​

The alignment of the overlayed component. If multiple components are placed in the overlay this alignment only affects the overall alignment of all children together as a group.

children: Template()​

The children to place in front.

The children property doesn't have to be listed explicitly. Instead you can simply have a trailing block, like in the example above.

Layout Behavior​

Mirrors the size of the component it is applied to and suggests this size to the overlayed children.