Skip to main content

Offset

Offsets a component by the specified distance.

modifier Offset

Example​

Offset shifts only the content, not the layout position it occupies. A Background is applied after the offset to make this visible: the background stays at the component's original position, while the content is drawn shifted away from it:

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

export var main = Text("Hello, world!") with {
    Offset(x: 40, y: 32)
    Background {
        Rectangle(color: Color(0xFFFF5F52))
    }
}

Component offset from its original position

Constructors​

X​

constructor(x: Float)

Only offsets on the x-axis.

x: Float

Offsets the component on the x-axis (horizontal).

Y​

constructor(y: Float)

Only offsets on the y-axis.

y: Float

Offsets the component on the y-axis (vertical).

X and Y​

constructor(x: Float, y: Float)

Offsets on both the x- and y-axis.

x: Float

Offsets the component on the x-axis (horizontal).

y: Float

Offsets the component on the y-axis (vertical).

Layout Behavior​

Mirrors the components size and offsets it from its determined position.