Spacer
Get the Jump app
You'll need the free Jump app to preview this page on your device. Install it, then scan the code again.
Overview#
A flexible space element that expands to fill remaining space within a column or row. Spacers are the simplest way to push elements apart without calculating explicit sizes.
<native:spacer />Default behavior#
Spacer ships with flex-grow: 1 applied automatically. Inside a <native:row> or <native:column>, it claims all
leftover space along the parent's main axis. Inside a non-flex parent (like <native:stack>), it does nothing — it has
no children and no intrinsic size to draw.
Supported Tailwind classes#
The classes that affect how a spacer renders:
| Class | Effect |
|---|---|
w-N, w-[N], w-1/2 etc. |
Lock the spacer to a fixed or fractional width |
h-N, h-[N] |
Lock the spacer to a fixed height |
flex-grow, flex-grow-0 |
Override the default grow=1 (use flex-grow-0 for a fixed-size spacer) |
flex-shrink, flex-shrink-0 |
Control shrink behavior |
bg-*, bg-theme-*, bg-[#hex], alpha /N |
Paint a visible background |
opacity-* |
Adjust visibility |
dark:*, ios:*, android:* |
Variant prefixes |
See the full shared list at Layout & Styling.
Examples#
Push content to bottom#
<native:column class="w-full h-[220] p-4 bg-theme-surface-variant rounded-xl"> <native:text class="text-2xl font-bold text-theme-primary">Welcome</native:text> <native:text class="text-base text-theme-on-surface-variant">Get started with your app.</native:text> <native:spacer /> <native:button label="Continue" @press="next" /></native:column>In a real app this column is usually the page root with h-full, so the spacer pushes the button to the bottom of the
screen. The fixed h-[220] here just gives the preview a bounded height — a spacer can only grow when its parent's
main axis is constrained.
Toolbar with right-aligned trailing icon#
<native:row class="w-full px-4 items-center"> <native:text class="text-xl font-bold text-theme-on-surface-variant">Title</native:text> <native:spacer /> <native:icon name="settings" class="text-theme-on-surface-variant" :size="24" /></native:row>Fixed-height spacer#
<native:column class="w-full"> <native:text class="text-theme-on-surface-variant">Section One</native:text> <native:spacer class="h-8 flex-grow-0" /> <native:text class="text-theme-on-surface-variant">Section Two</native:text></native:column>Element#
use Native\Mobile\Edge\Elements\Spacer; Spacer::make(); // flex-grow: 1Spacer::make()->height(8)->flexGrow(0); // fixed 8dp vertical
in no time
