Layout Reference

Complete reference for layout components in Hypen.

Column

Arranges children vertically.

Column {
    Text("Top")
    Text("Middle")
    Text("Bottom")
}
.gap(12)

Arranges children horizontally.

Row {
    Text("Left")
    Text("Right")
}
.gap(12)

Generic container with z-axis stacking.

Box {
    Image("background.jpg")
    Text("Overlay")
}

Centers children both horizontally and vertically.

Center {
    Spinner()
}
.fillMaxSize(true)

Z-axis stacking for overlapping elements.

Stack {
    Card { Text("Base") }
    Badge("New")
}

Grid layout with configurable columns.

Grid {
    Card { Text("1") }
    Card { Text("2") }
    Card { Text("3") }
    Card { Text("4") }
}
.gridColumns(2)
.gap(16)

Scrollable container for items.

List {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}
.height(400)

Flexible empty space.

Row {
    Text("Left")
    Spacer()
    Text("Right")
}

Visual separator line.

Column {
    Text("Section 1")
    Divider()
    Text("Section 2")
}

Applicator	Values
horizontalAlignment	start, center, end, space-between, space-around
verticalAlignment	start, center, end, space-between, space-around
alignItems	flex-start, center, flex-end, stretch
justifyContent	flex-start, center, flex-end, space-between, space-around