HStack

A Component that arranges its children in a horizontal line.

component HStack

Example

import { HStack, Rectangle, Frame } from ui

// Create 10px gaps between children
export var main = HStack(spacing: 10) {
    // Fixed size
    Rectangle(color: Color(0xFF8E0000)) with {
        Frame(width: 24, height: 48)
    }

    Rectangle(color: Color(0xFFC62828)) with {
        Frame(height: 24)
    }

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

Constructor

constructor(spacing: Float = 0, alignment: VerticalAlignment = VerticalAlignment.center, children: Template())

spacing: Float = 0

The gap between each child component.

alignment: VerticalAlignment = VerticalAlignment.center

The vertical alignment of child components if they have less height than the overall height.

See VerticalAlignment

children: Template()

The children to be arranged.

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

The HStack's width reflects the sum of the widths of all children and spacing. Its height is the maximum height of its children.