Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

Use this file to discover all available pages before exploring further.

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.
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()
        ])
    )
])

​
See also

  • VStack — vertical stack that hosts spacers and dividers
  • HStack — horizontal stack that hosts spacers and dividers
  • Group — group components without adding layout
  • ForEach — iterate over data to produce children