Split Pane — ARC UI

Components

Split Pane

layout

interactive

<arc-split-pane>

Overview

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

Use SplitPane for static two-column layouts; use PageLayout with sidebar-left or sidebar-right instead
Set min-ratio and max-ratio so close that the drag range is negligible
Nest multiple SplitPanes more than two levels deep -- the interaction becomes confusing
Forget to set a height on the SplitPane container; without it the panes collapse to content height
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';

<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: `
    <SplitPane orientation="horizontal" ratio="0.4">
      <div slot="primary">Primary pane</div>
      <div slot="secondary">Secondary pane</div>
    </SplitPane>
  `,
})
export class MyComponent {}

import { SplitPane } from '@arclux/arc-ui-solid';

<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';

<SplitPane orientation="horizontal" ratio="0.4">
  <div slot="primary">Primary pane</div>
  <div slot="secondary">Secondary pane</div>
</SplitPane>

API

Prop	Type	Default	Description
`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

Event	Description
`arc-resize`	Fired during divider drag with { ratio } detail