Skip to main content

HStack

A Component that arranges its children in a horizontal line.

component HStack
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)
    }
}

HStack Example

Constructor​

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.