Skip to main content

Spacer

Expands along the main axis of the containing HStack or VStack, or on both axes if contained in any other Component.

component Spacer
import { Spacer, HStack, Rectangle, Frame } from ui

export var main = HStack {
    Rectangle(color: Color(0XFF8E0000)) with {
        Frame(width: 24, height: 48)
    }

    Spacer()

    Rectangle(color: Color(0xFFFF5F52)) with {
        Frame(width: 24, height: 48)
    }
} with {
    Frame(width: 128, height: 48)
}

Spacer Example

Note

The Spacer has lower priority than all other components and therefore only occupies remaining space after all other children have been processed.

Constructor​

min_length: Float = 4.0​

The minimum length the spacer will occupy.

Layout Behavior​

Expands into the remaining available space along the main axis of its containing stack layout or on both axes if not in a stack layout.

caution

There is a known issue when applying a modifier on a Spacer.