Empty states and spacers

These three components produce no content of their own — they exist to shape the space around other components. Empty renders nothing and takes no space, useful as the else-branch of a conditional. Spacer expands to fill available space along the major axis of its parent stack. Divider draws a thin separator line, adapting its orientation to the parent stack.

Empty

An empty component that renders nothing.

Empty(): Component;

Empty takes no parameters. It produces a component that renders nothing and occupies no space. Conditional rendering Use Empty as the else-branch when conditionally showing content:

showContent ? Text("Hello") : Empty()

Placeholder in layouts

VStack([
    Text("Title"),
    showSubtitle ? Text("Subtitle") : Empty()
])

Spacer

A flexible space that expands along the major axis of its parent stack.

Spacer(props?: { minLength: number }): Component;

props

object

Configuration options for the spacer.

Show properties

minLength

number

The minimum length of the spacer in points. The spacer will not shrink below this size.

Push items apart in an HStack

HStack([
    Text("Leading"),
    Spacer(),
    Text("Trailing")
])

Push content to the top

VStack([
    Text("Top"),
    Spacer()
])
    .frame({ maxHeight: ".infinity" })

With minimum length

HStack([
    Text("Left"),
    Spacer({ minLength: 24 }),
    Text("Right")
])

In a VStack, Spacer expands vertically. In an HStack, it expands horizontally. Multiple Spacers in the same stack share the available space equally.

Divider

A thin line separator that adapts its orientation to the parent stack.

Divider(): Component;

Divider takes no parameters. It renders a horizontal line in a VStack and a vertical line in an HStack. In a VStack

VStack([
    Text("Above"),
    Divider(),
    Text("Below")
])

In an HStack

HStack([
    Text("Left"),
    Divider(),
    Text("Right")
])
    .frame({ height: 40 })

Separating list items

VStack({ spacing: 0 }, [
    ForEach(items, (item, index) =>
        Group([
            Text(item.name).padding(12),
            index < items.length - 1 ? Divider() : Empty()
        ])
    )
])

​Empty

​Spacer

​Divider

​See also

Empty

Spacer

Divider

See also