https://framer.com/m/SplitPanelPro-SHYPvP.js

_ __ _ (_)___ ____/ /__ _____(_)___ _____ / / __ \ / __ / _ \/ ___/ / __ `/ __ \ / / /_/ / / /_/ / __(__ ) / /_/ / / / / /_/\____/ \__,_/\___/____/_/\__, /_/ /_/ /____/ __ _______ _______/ /____ ____ ___ / ___/ / / / ___/ __/ _ \/ __ `__ \ (__ ) /_/ (__ ) /_/ __/ / / / / / /____/\__, /____/\__/\___/_/ /_/ /_/ /____/

Hello, Design System
你好，设计系统
こんにちは、デザインシステム
안녕하세요, 디자인 시스템
Hola, Sistema de Diseño
Bonjour, Design System
Hallo, Designsystem
Olá, Sistema de Design
Привет, дизайн-система
مرحبًا، نظام التصميم

UI Text

io

The System

UI Basics

Enhancements

Io / UI Basics / SplitPanelPro

SplitPanelPro

SplitPanelPro divides a view into two panes with a handle between them. Orientation, the resting split, the bounds and the handle are props — and either pane can be collapsed away entirely without changing the markup.

Layouttwo panesresizablehorizontal or vertical

Examples

Live specimens for every control the component exposes.

Default

Two panes side by side, with a draggable handle between them.

Panel A

The left or top pane.

Its size is what the handle changes.

Panel B

The right or bottom pane.

It takes whatever space is left.

Orientation

type turns the split from side-by-side into stacked. The panes and the handle come with it.

Panel A

The left or top pane.

Its size is what the handle changes.

Panel B

The right or bottom pane.

It takes whatever space is left.

type horizontal

Panel A

The left or top pane.

Its size is what the handle changes.

Panel B

The right or bottom pane.

It takes whatever space is left.

type vertical

Collapsing a pane

layout drops to a single pane without touching the content. Useful when the same view has a detail mode and a full-width mode.

Panel A

The left or top pane.

Its size is what the handle changes.

Panel B

The right or bottom pane.

It takes whatever space is left.

layout split

Panel A

The left or top pane.

Its size is what the handle changes.

layout onlyA

Panel B

The right or bottom pane.

It takes whatever space is left.

layout onlyB

Fixed split

resize off keeps the handle in place, so the split becomes a layout decision rather than something the reader can change.

Panel A

The left or top pane.

Its size is what the handle changes.

Panel B

The right or bottom pane.

It takes whatever space is left.

resize true

Panel A

The left or top pane.

Its size is what the handle changes.

Panel B

The right or bottom pane.

It takes whatever space is left.

resize false

Props

The controls exposed on the instance panel.

Prop	Type	Behaviour
panelA	slot	Content of the first pane — left when horizontal, top when vertical.
panelB	slot	Content of the second pane.
layout	enum	split shows both panes; onlyA and onlyB collapse to one.
type	enum	horizontal splits side by side; vertical stacks the panes.
resize	boolean	Whether the handle can be dragged at all.
default	object	Resting size of the first pane.
min	object	Smallest the first pane may be dragged to.
max	object	Largest the first pane may be dragged to.
divider	object	Thickness and colour of the line between the panes.
handle	object	Appearance of the grab handle on that line.
occlude	boolean	Clips pane content at the divider instead of letting it bleed.

Prop	Type	Behaviour
panelA	slot	Content of the first pane — left when horizontal, top when vertical.
panelB	slot	Content of the second pane.
layout	enum	split shows both panes; onlyA and onlyB collapse to one.
type	enum	horizontal splits side by side; vertical stacks the panes.
resize	boolean	Whether the handle can be dragged at all.
default	object	Resting size of the first pane.
min	object	Smallest the first pane may be dragged to.
max	object	Largest the first pane may be dragged to.
divider	object	Thickness and colour of the line between the panes.
handle	object	Appearance of the grab handle on that line.
occlude	boolean	Clips pane content at the divider instead of letting it bleed.

Usage

Guidance carried over from the component definition.

Reach for SplitPanelPro

A view genuinely has two parts the reader may want to rebalance.

The same layout needs a two-pane and a single-pane mode.

The divider and handle should follow the theme.

The split should work both side by side and stacked.

Reach for something else

The layout is static — a stack or grid is simpler.

You need more than two areas.

Only the basic two-pane behaviour is needed — SplitPanel covers that.

Io — UI Basics

Every split above is a live SplitPanelPro instance with two slotted panes. Colour, type and radius resolve from the project theme tokens.