Spacer
A flexible spacer that expands to fill available space or renders at a fixed size.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Spacer />
Tested
Tier 1 · Render + props
all components → Render Behavior A11y Keyboard Scale E2E
4 tests across 1 file. Auto-generated from the test suite.
Brand
Jane Doe
jane@example.com
Header
API Reference
Spacer
| Prop | Type | Default | Description |
|---|---|---|---|
| Size | string? | — | Tailwind size token (e.g. "4", "px"). When set, renders a fixed-size square spacer. When unset, renders a flex-grow spacer that fills available space along the parent flex axis. |
| Orientation | Lumeo.Orientation | Lumeo.Orientation.Horizontal | Hints which axis the parent flex container uses so the grow-spacer collapses to zero on the cross-axis instead of expanding it. Default Horizontal keeps the historical behaviour (flex-1 inside a row). Switch to Vertical when the parent is a column stack — without it, the spacer's flex-1 took width from the column instead of pushing siblings to opposite ends. |
| Class | string? | — | Additional CSS classes merged onto the root div. |
| AdditionalAttributes | Dictionary<string, object>? | — | Unmatched attributes splatted onto the root div. |