Skip to main content

Background

Layers the given components behind this component.

modifier Background

Example​

import { Background, Text, Padding, Rectangle } from ui

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

Background Example

Constructor​

constructor(alignment: Alignment = Alignment.center, children: Template())
alignment: Alignment = Alignment.center

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

children: Template()

The children to place in the background.

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 background children.