Alignment Enums¶

Nib provides alignment enums that control how views are positioned within their containers. Each enum maps directly to a SwiftUI alignment type.

alignment_enums

import nib


def main(app: nib.App):
    app.title = "Alignment"
    app.icon = nib.SFSymbol("align.horizontal.left")
    app.width = 340
    app.height = 300

    def box(color, w=28, h=28):
        return nib.Rectangle(fill=color, corner_radius=4, width=w, height=h)

    def hstack(alignment):
        return nib.HStack(
            controls=[
                box("#0a84ff", 20, 40),
                box("#30d158", 20, 20),
                box("#ff9f0a", 20, 30),
            ],
            alignment=alignment,
            spacing=6,
        )

    def zstack(alignment):
        return nib.ZStack(
            controls=[box("#3a3a3c", 60, 44), box("#ff453a", 14, 14)],
            alignment=alignment,
        )

    def labelled(text, view):
        return nib.VStack(
            controls=[
                view,
                nib.Text(
                    text, font=nib.Font.CAPTION2, foreground_color=nib.Color.SECONDARY
                ),
            ],
            spacing=4,
        )

    app.build(
        nib.VStack(
            controls=[
                nib.Text("VerticalAlignment in an HStack", font=nib.Font.CAPTION),
                nib.HStack(
                    controls=[
                        labelled("TOP", hstack(nib.VerticalAlignment.TOP)),
                        labelled("CENTER", hstack(nib.VerticalAlignment.CENTER)),
                        labelled("BOTTOM", hstack(nib.VerticalAlignment.BOTTOM)),
                    ],
                    spacing=20,
                ),
                nib.Text("Alignment in a ZStack", font=nib.Font.CAPTION),
                nib.HStack(
                    controls=[
                        labelled("TOP_LEADING", zstack(nib.Alignment.TOP_LEADING)),
                        labelled("CENTER", zstack(nib.Alignment.CENTER)),
                        labelled(
                            "BOTTOM_TRAILING", zstack(nib.Alignment.BOTTOM_TRAILING)
                        ),
                    ],
                    spacing=20,
                ),
            ],
            spacing=10,
            padding=20,
            alignment=nib.Alignment.LEADING,
        )
    )


nib.run(main)

HorizontalAlignment¶

Controls horizontal alignment of children within a VStack.

Value	SwiftUI Equivalent	Description
`HorizontalAlignment.LEADING`	`.leading`	Align children to the left (LTR) or right (RTL) edge.
`HorizontalAlignment.CENTER`	`.center`	Center children horizontally (default).
`HorizontalAlignment.TRAILING`	`.trailing`	Align children to the right (LTR) or left (RTL) edge.

import nib

nib.VStack(
    controls=[
        nib.Text("Left-aligned title"),
        nib.Text("Left-aligned body"),
    ],
    alignment=nib.HorizontalAlignment.LEADING,
    spacing=4,
)

VerticalAlignment¶

Controls vertical alignment of children within an HStack.

Value	SwiftUI Equivalent	Description
`VerticalAlignment.TOP`	`.top`	Align children to the top edge.
`VerticalAlignment.CENTER`	`.center`	Center children vertically (default).
`VerticalAlignment.BOTTOM`	`.bottom`	Align children to the bottom edge.

import nib

nib.HStack(
    controls=[
        nib.Text("Label", font=nib.Font.CAPTION),
        nib.Text("Value", font=nib.Font.TITLE),
    ],
    alignment=nib.VerticalAlignment.BOTTOM,
    spacing=8,
)

Alignment¶

Combined two-dimensional alignment for ZStack and the frame modifier. Specifies both horizontal and vertical alignment simultaneously.

Value	SwiftUI Equivalent	Description
`Alignment.TOP_LEADING`	`.topLeading`	Top-left corner.
`Alignment.TOP`	`.top`	Top edge, centered horizontally.
`Alignment.TOP_TRAILING`	`.topTrailing`	Top-right corner.
`Alignment.LEADING`	`.leading`	Left edge, centered vertically.
`Alignment.CENTER`	`.center`	Center of the view (default).
`Alignment.TRAILING`	`.trailing`	Right edge, centered vertically.
`Alignment.BOTTOM_LEADING`	`.bottomLeading`	Bottom-left corner.
`Alignment.BOTTOM`	`.bottom`	Bottom edge, centered horizontally.
`Alignment.BOTTOM_TRAILING`	`.bottomTrailing`	Bottom-right corner.

import nib

# Badge in the top-right corner of a ZStack
nib.ZStack(
    controls=[
        nib.Rectangle(fill="#333", width=200, height=100, corner_radius=12),
        nib.Text(
            "3",
            font=nib.Font.CAPTION,
            foreground_color=nib.Color.WHITE,
            background=nib.Color.RED,
            padding={"horizontal": 6, "vertical": 2},
            corner_radius=8,
        ),
    ],
    alignment=nib.Alignment.TOP_TRAILING,
)

ScrollAxis¶

Controls the scroll direction for ScrollView containers.

Value	SwiftUI Equivalent	Description
`ScrollAxis.VERTICAL`	`.vertical`	Scroll vertically (default).
`ScrollAxis.HORIZONTAL`	`.horizontal`	Scroll horizontally.
`ScrollAxis.BOTH`	`[.vertical, .horizontal]`	Scroll in both directions.

import nib

# Vertical scrolling list
nib.ScrollView(
    controls=[nib.Text(f"Item {i}") for i in range(50)],
    axes=nib.ScrollAxis.VERTICAL,
)

# Horizontal scrolling row
nib.ScrollView(
    controls=[
        nib.Rectangle(fill="blue", width=100, height=100, corner_radius=8)
        for _ in range(10)
    ],
    axes=nib.ScrollAxis.HORIZONTAL,
)

Examples¶

Combining alignments in a layout¶

import nib

def main(app: nib.App):
    app.build(
        nib.VStack(
            controls=[
                # Header aligned to leading edge
                nib.Text("My App", font=nib.Font.LARGE_TITLE),

                # Content in a ZStack with alignment
                nib.ZStack(
                    controls=[
                        nib.Rectangle(
                            fill="#1E1E1E",
                            width=250,
                            height=150,
                            corner_radius=12,
                        ),
                        nib.Text(
                            "Centered",
                            foreground_color=nib.Color.WHITE,
                        ),
                    ],
                    alignment=nib.Alignment.CENTER,
                ),

                # Footer row aligned to bottom
                nib.HStack(
                    controls=[
                        nib.Text("v1.0", font=nib.Font.CAPTION),
                        nib.Spacer(),
                        nib.Text("Status: OK", font=nib.Font.CAPTION),
                    ],
                    alignment=nib.VerticalAlignment.BOTTOM,
                ),
            ],
            alignment=nib.HorizontalAlignment.LEADING,
            spacing=12,
            padding=16,
        )
    )

nib.run(main)

Alignment Enums