Split Surface Demo

Layer 1: Attribute Init

data-splitter — injected divider with keyboard support

Main Content

Focus the divider, then use arrow keys.

Layer 1: Vertical

data-splitter="vertical"

Top Panel

Bottom Panel

Layer 2: Web Component

<split-surface> — full features

Main Content

Full component with all features.

Layer 2: Collapsible

Double-click divider to collapse

Content

The aside will collapse and expand on double-click.

Layer 2: Vertical

<split-surface direction="vertical">

Top Panel

Bottom Panel

Layer 2: Persistence

persist="demo" — resize, then reload

Main Content

Position is saved to localStorage.