141 lines
3.2 KiB
Markdown
141 lines
3.2 KiB
Markdown
# SbSpacer
|
|
|
|
A utility component for adding vertical or horizontal spacing between elements.
|
|
|
|
## Parameters
|
|
|
|
| Parameter | Type | Default | Description |
|
|
|-----------|------|---------|-------------|
|
|
| Size | SbSpacerSize | Medium | Size preset for the spacer |
|
|
| Height | string? | null | Custom height (overrides Size) |
|
|
| Width | string? | null | Custom width (for horizontal spacing) |
|
|
| Grow | bool | false | Whether the spacer should grow to fill available space |
|
|
| Class | string? | null | Additional CSS classes |
|
|
|
|
## SbSpacerSize Enum
|
|
|
|
```csharp
|
|
public enum SbSpacerSize
|
|
{
|
|
ExtraSmall, // 0.25rem (4px)
|
|
Small, // 0.5rem (8px)
|
|
Medium, // 1rem (16px)
|
|
Large, // 1.5rem (24px)
|
|
ExtraLarge // 2rem (32px)
|
|
}
|
|
```
|
|
|
|
## CSS Classes
|
|
|
|
- `sb-spacer` - Base class
|
|
|
|
## Accessibility
|
|
|
|
- Uses `aria-hidden="true"` since it's a visual-only element
|
|
|
|
## Examples
|
|
|
|
### Basic Usage
|
|
|
|
```razor
|
|
<SbHeading Level="1">Title</SbHeading>
|
|
<SbSpacer />
|
|
<SbText>Some content with default spacing above.</SbText>
|
|
```
|
|
|
|
### Different Sizes
|
|
|
|
```razor
|
|
<div>Content 1</div>
|
|
<SbSpacer Size="SbSpacerSize.ExtraSmall" />
|
|
<div>Content 2 (4px gap)</div>
|
|
|
|
<div>Content 3</div>
|
|
<SbSpacer Size="SbSpacerSize.Small" />
|
|
<div>Content 4 (8px gap)</div>
|
|
|
|
<div>Content 5</div>
|
|
<SbSpacer Size="SbSpacerSize.Large" />
|
|
<div>Content 6 (24px gap)</div>
|
|
|
|
<div>Content 7</div>
|
|
<SbSpacer Size="SbSpacerSize.ExtraLarge" />
|
|
<div>Content 8 (32px gap)</div>
|
|
```
|
|
|
|
### Custom Height
|
|
|
|
```razor
|
|
<SbCard>First Card</SbCard>
|
|
<SbSpacer Height="3rem" />
|
|
<SbCard>Second Card with custom 3rem gap</SbCard>
|
|
```
|
|
|
|
### Horizontal Spacing
|
|
|
|
```razor
|
|
<SbStack Direction="SbStackDirection.Row">
|
|
<SbButton>Button 1</SbButton>
|
|
<SbSpacer Width="2rem" />
|
|
<SbButton>Button 2</SbButton>
|
|
</SbStack>
|
|
```
|
|
|
|
### Growing Spacer (Push to End)
|
|
|
|
```razor
|
|
<SbStack Direction="SbStackDirection.Row" Style="width: 100%;">
|
|
<SbText>Left Content</SbText>
|
|
<SbSpacer Grow="true" />
|
|
<SbButton>Right Button</SbButton>
|
|
</SbStack>
|
|
```
|
|
|
|
### In Navigation Menu
|
|
|
|
Use `SbSpacer Grow="true"` inside a vertical stack to push items to the bottom (e.g. in Wish theme's `WishSidebar` or `WishIconRail`):
|
|
|
|
```razor
|
|
<SbStack Direction="SbStackDirection.Column" Gap="0">
|
|
<SbNavMenu>
|
|
<SbNavItem Href="/" Icon="home">Dashboard</SbNavItem>
|
|
<SbNavItem Href="/analytics" Icon="bar-chart">Analytics</SbNavItem>
|
|
</SbNavMenu>
|
|
<SbSpacer Grow="true" />
|
|
<SbNavMenu>
|
|
<SbNavItem Href="/settings" Icon="settings">Settings</SbNavItem>
|
|
<SbNavItem Href="/help" Icon="help-circle">Help</SbNavItem>
|
|
</SbNavMenu>
|
|
</SbStack>
|
|
```
|
|
|
|
### Section Dividers
|
|
|
|
```razor
|
|
<SbStack Gap="2">
|
|
<SbHeading Level="2">Section 1</SbHeading>
|
|
<SbText>Content for section 1...</SbText>
|
|
|
|
<SbSpacer Size="SbSpacerSize.Large" />
|
|
|
|
<SbHeading Level="2">Section 2</SbHeading>
|
|
<SbText>Content for section 2...</SbText>
|
|
|
|
<SbSpacer Size="SbSpacerSize.Large" />
|
|
|
|
<SbHeading Level="2">Section 3</SbHeading>
|
|
<SbText>Content for section 3...</SbText>
|
|
</SbStack>
|
|
```
|
|
|
|
### Footer Push Down
|
|
|
|
```razor
|
|
<SbStack Style="min-height: 100vh;">
|
|
<header>Header</header>
|
|
<main>Main Content</main>
|
|
<SbSpacer Grow="true" />
|
|
<footer>Footer pushed to bottom</footer>
|
|
</SbStack>
|
|
```
|