Spacer
Spacer is a flexible space that expands along the major axis of its parent container. Spacer is used to push content apart and create flexible layouts.
Spacer is a flexible space that expands along the major axis of its parent container. Spacer is used to push content apart and create flexible layouts.
Examples
Basic Usage
Preview unavailable for this example in the static docs build.
Show code
<HStack style={{ width: '100%' }}>
<Text>Left</Text>
<Spacer />
<Text>Right</Text>
</HStack>In HStack
Preview unavailable for this example in the static docs build.
Show code
<HStack spacing={10} style={{ width: '100%' }}>
<Button>Left</Button>
<Spacer />
<Button>Right</Button>
</HStack>In VStack
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={10} style={{ height: '200px' }}>
<Text>Top</Text>
<Spacer />
<Text>Bottom</Text>
</VStack>With Minimum Length
Preview unavailable for this example in the static docs build.
Show code
<HStack style={{ width: '100%' }}>
<Text>Left</Text>
<Spacer minLength={50} />
<Text>Right</Text>
</HStack>Multiple Spacers
Preview unavailable for this example in the static docs build.
Show code
<HStack spacing={10} style={{ width: '100%' }}>
<Text>Start</Text>
<Spacer />
<Text>Middle</Text>
<Spacer />
<Text>End</Text>
</HStack>Leading Spacer
Preview unavailable for this example in the static docs build.
Show code
<HStack style={{ width: '100%' }}>
<Spacer />
<Text>Pushed to Right</Text>
</HStack>Trailing Spacer
Preview unavailable for this example in the static docs build.
Show code
<HStack style={{ width: '100%' }}>
<Text>Pushed to Left</Text>
<Spacer />
</HStack>Complex Layout
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={10} style={{ height: '300px', width: '100%' }}>
<Text>Header</Text>
<Spacer />
<HStack spacing={10} style={{ width: '100%' }}>
<Button>Cancel</Button>
<Spacer />
<Button>Confirm</Button>
</HStack>
</VStack>API
| Prop | Type | Required | Description |
|---|---|---|---|
minLength | number | string | No | The minimum length of the spacer, in pixels or as a CSS value string. Default: 0 |
Inherits additional props from Omit<IBaseComponent, 'children'>.
Overview
Spacer is a flexible space that expands along the major axis of its parent container. Spacer is used to push content apart and create flexible layouts.
SwiftUI Correspondence: Similar to SwiftUI's Spacer.
In HStack
Use Spacer to push content to edges:
With Minimum Length
Set a minimum length for the spacer:
Multiple Spacers
Use multiple spacers for complex layouts:
Leading Spacer
Push content to the trailing edge:
Trailing Spacer
Push content to the leading edge:
Notes
- Spacer expands to fill available space in its parent container
- Spacer works in both HStack (horizontal) and VStack (vertical) layouts
- Use
minLengthto set a minimum size for the spacer - Multiple spacers divide available space equally
- Spacer requires a parent container with defined dimensions
Best Practices
- Parent dimensions: Ensure parent container has explicit dimensions for Spacer to work
- Multiple spacers: Use multiple spacers to distribute space evenly
- Min length: Set appropriate minimum lengths to prevent content from being too close
- Layout structure: Use Spacer to create flexible, responsive layouts
- Performance: Spacer is lightweight and doesn't impact performance
Slider
Slider is a control for selecting a value from a bounded linear range of values. Slider is built on a native `<input type="range">`, so it keeps standard keyboard support, focus behavior, and form participation.
Stepper
Stepper is a control for incrementing or decrementing a numeric value. It supports both controlled and uncontrolled usage and exposes semantic increment/decrement buttons.