Skip to content

x-spacer.md

Latest commit

 

History

History
111 lines (79 loc) · 3.39 KB

x-spacer.md

File metadata and controls

111 lines (79 loc) · 3.39 KB
Raw

x-spacer

A layout utility component that inserts whitespace between sibling elements. Supports a fixed-size gap or a flexible "spring" that expands to fill remaining space in a flex container.

Tag

<x-spacer></x-spacer>

Registration

import { init } from '@vanelsas/baredom/x-spacer';
init();

Attributes

Attribute Type Default Description
size string "1rem" CSS length value for the spacer dimension (e.g. 16px, 2rem)
axis enum "vertical" "vertical" creates height; "horizontal" creates width
grow bool absent When present, spacer expands to fill remaining flex space

Properties

Property Type Reflects Default Description
size string size "1rem" CSS length for the spacer dimension
axis string axis "vertical" Spacer axis direction
grow boolean grow false Whether the spacer fills flex space

CSS Custom Properties

Property Default Description
--x-spacer-size 1rem Overrides the spacer dimension set by the size attr

The size attribute writes --x-spacer-size to the element's inline style on every render, so attribute and custom property always stay in sync.

Events

None.

Slots

None.

Accessibility

x-spacer is a purely decorative layout element. It sets role="none" and aria-hidden="true" automatically so screen readers ignore it entirely.

Behaviour

  • Vertical spacer (default): creates height equal to size. Width is 0.
  • Horizontal spacer (axis="horizontal"): creates width equal to size. Height is 0.
  • Grow spacer (grow attribute): sets flex: 1 0 <size>. The spacer grows to fill remaining space in the flex container's main axis direction. The size value becomes the flex basis (minimum). Height and width are 0 so only the flex dimension is affected.

flex-shrink is 0 in all non-grow modes so the spacer never collapses.

Usage Examples

Vertical gap between stacked elements

<div style="display: flex; flex-direction: column;">
  <p>First block</p>
  <x-spacer size="24px"></x-spacer>
  <p>Second block</p>
</div>

Horizontal gap in a row

<div style="display: flex; align-items: center;">
  <span>Left</span>
  <x-spacer axis="horizontal" size="16px"></x-spacer>
  <span>Right</span>
</div>

Grow spacer (flex spring — push actions to the end of a nav bar)

<nav style="display: flex; align-items: center; padding: 0 16px;">
  <span>Logo</span>
  <x-spacer grow></x-spacer>
  <button>Sign in</button>
</nav>

Grow with minimum size

<nav style="display: flex; align-items: center;">
  <span>Logo</span>
  <x-spacer grow size="16px"></x-spacer>
  <button>Sign in</button>
</nav>

Setting via property

const spacer = document.querySelector('x-spacer');
spacer.size = '2rem';
spacer.axis = 'horizontal';
spacer.grow = true;