Split Pane

Resizable split layout with two panes.

Components

Split Pane

layout

interactive

<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 out of the box. 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

File Tree

src/ index.ts utils.ts types.ts package.json

Select a file to view its contents

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

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.
ratio number =0.5: The proportion of space allocated to the primary pane, from 0 to 1. A value of 0.4 gives the primary pane 40% of the available width (or height in vertical mode).
min-ratio number =0.15: Minimum allowed ratio. The divider cannot be dragged below this value, preventing the primary pane from collapsing.
max-ratio number =0.85: Maximum allowed ratio. The divider cannot be dragged above this value, preventing the secondary pane from collapsing.

Events

arc-resize detail: { ratio: number }: Fired during divider drag with { ratio } detail

Split Pane

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight