Split Pane
Resizable split layout with two panes.
<arc-split-pane>Overview
SplitPane divides a container into two resizable regions separated by a draggable handle. It is the standard pattern for code editors (source + preview), email clients (list + reader), and file managers (tree + detail) where both panels need to share a finite amount of space. The orientation prop controls whether the split runs horizontally (side by side) or vertically (stacked top and bottom).
The divider position is expressed as a ratio between 0 and 1, where 0.5 means an even 50/50 split. As the user drags the handle, the component clamps the ratio between min-ratio and max-ratio to prevent either pane from collapsing to an unusable size. When the drag ends, an arc-resize custom event fires with the final ratio so you can persist the user's layout preference.
Content is distributed through two named slots: primary (the region whose size is controlled by the ratio) and secondary (which flexes to fill the remaining space). Both panes have overflow: auto by default so independently scrollable content works without extra CSS. The handle renders as a 4px bar that brightens on hover to --border-bright, and user-select is disabled during drag to prevent text selection artifacts.
Guidelines
When to use
- Use SplitPane for editor/preview, list/detail, and tree/content layouts
- Set min-ratio to at least 0.15 and max-ratio to at most 0.85 to keep both panes usable
- Listen for the arc-resize event to save the user preferred ratio to localStorage
- Give the SplitPane parent a defined height (e.g. 100vh or flex: 1) so the panes can fill it
- Use orientation="vertical" for top/bottom splits like console panels or diff views
When not to use
- Do not use SplitPane for static two-column layouts; use PageLayout with sidebar-left or sidebar-right instead
- Do not set min-ratio and max-ratio so close that the drag range is negligible
- Do not nest multiple SplitPanes more than two levels deep: the interaction becomes confusing
- Do not forget to set a height on the SplitPane container; without it the panes collapse to content height
- Do not place critical controls in the secondary pane if min-ratio could hide it on narrow viewports
Features
- Horizontal and vertical split orientations via the orientation prop
- Ratio-based sizing (0-1) with configurable min-ratio and max-ratio constraints
- Draggable 4px divider handle with hover and active visual states
- `arc-resize` custom event with final ratio on drag end
- Named primary and secondary slots for clear content assignment
- Both panes have overflow: auto for independently scrollable content
- User-select disabled during drag to prevent text selection artifacts
- CSS parts (base, primary, handle, secondary) for targeted ::part() styling
Preview
Usage
This component requires JavaScript. No pure HTML/CSS version is available. Use the Web Component directly or a framework wrapper.
<arc-split-pane orientation="horizontal" ratio="0.4">
<div slot="primary">Primary pane</div>
<div slot="secondary">Secondary pane</div>
</arc-split-pane>import { SplitPane } from '@arclux/arc-ui-react';
export default function Example() {
return (
<SplitPane orientation="horizontal" ratio="0.4">
<div slot="primary">Primary pane</div>
<div slot="secondary">Secondary pane</div>
</SplitPane>
);
}<script setup>
import { SplitPane } from '@arclux/arc-ui-vue';
</script>
<template>
<SplitPane orientation="horizontal" ratio="0.4">
<div slot="primary">Primary pane</div>
<div slot="secondary">Secondary pane</div>
</SplitPane>
</template><script>
import { SplitPane } from '@arclux/arc-ui-svelte';
</script>
<SplitPane orientation="horizontal" ratio="0.4">
<div slot="primary">Primary pane</div>
<div slot="secondary">Secondary pane</div>
</SplitPane>import { Component } from '@angular/core';
import { SplitPane } from '@arclux/arc-ui-angular';
@Component({
imports: [SplitPane],
template: `
<arc-split-pane orientation="horizontal" ratio="0.4">
<div slot="primary">Primary pane</div>
<div slot="secondary">Secondary pane</div>
</arc-split-pane>
`,
})
export class MyComponent {}import { SplitPane } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<SplitPane orientation="horizontal" ratio="0.4">
<div slot="primary">Primary pane</div>
<div slot="secondary">Secondary pane</div>
</SplitPane>
);
}import { SplitPane } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<SplitPane orientation="horizontal" ratio="0.4">
<div slot="primary">Primary pane</div>
<div slot="secondary">Secondary pane</div>
</SplitPane>
);
}API
STEPnumber0.05- Keyboard step, and the larger Shift step: the same 5-and-20 as arc-resizable.
STEP_LARGEnumber0.2labelstring''- Accessible name for the divider, applied as
aria-label. Defaults to "Resize panes". orientation'horizontal' | 'vertical''horizontal'- Controls the split direction. Horizontal places panes side by side with a vertical divider. Vertical stacks panes top and bottom with a horizontal divider.
rationumber0.5- The proportion of space allocated to the primary pane, clamped to
minRatio..maxRatioon every path, including assignment from script. From 0 to 1. A value of 0.4 gives the primary pane 40% of the available width (or height in vertical mode). minRationumber0.15- Minimum allowed ratio. The divider cannot be dragged below this value, preventing the primary pane from collapsing.
maxRationumber0.85- Maximum allowed ratio. The divider cannot be dragged above this value, preventing the secondary pane from collapsing.
Events
arc-resizedetail:{ value: number, ratio: number }- Fired on every step of a divider drag and on every keyboard step, with the new ratio on both
detail.valueanddetail.ratio.