Widgets
Spacer
Adds empty space in a row/column layout.
Adds empty space in a row/column layout.
Usage
import { ui } from "@rezi-ui/core";
ui.row({ gap: 1 }, [
ui.text("Left"),
ui.spacer({ flex: 1 }),
ui.text("Right"),
]);Props
| Prop | Type | Default | Description |
|---|---|---|---|
key | string | - | Reconciliation key |
size | number | - | Fixed size in cells along the stack axis |
flex | number | - | Expand to fill remaining space (main axis) |
Examples
1) Fixed spacing
import { ui } from "@rezi-ui/core";
ui.row({ gap: 0 }, [ui.text("A"), ui.spacer({ size: 4 }), ui.text("B")]);2) Center an item
import { ui } from "@rezi-ui/core";
ui.row({}, [
ui.spacer({ flex: 1 }),
ui.text("Centered"),
ui.spacer({ flex: 1 }),
]);Related
- Row / Column - Stack layouts
- Layout - Flex and size constraints