Spacer
The Spacer component provides flexible spacing in layouts, useful for pushing elements apart or creating consistent gaps.
Import
<script>
import { Spacer } from 'svelte-fluentui';
</script>svelte
Basic Usage
<div style="display: flex;">
<div>Left content</div>
<Spacer />
<div>Right content</div>
</div>svelte
Fixed Size Spacer
<Stack orientation="horizontal">
<Button>First</Button>
<Spacer size="20px" />
<Button>Second</Button>
</Stack>svelte
Vertical Spacer
<div>
<p>Above</p>
<Spacer orientation="vertical" size="50px" />
<p>Below</p>
</div>svelte
Properties
| Property | Type | Default | Description |
|---|---|---|---|
size | string | undefined | Fixed size (e.g., '20px', '2rem') |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Spacer direction |