Splitter

Split panels to isolate
Importimport{ Splitter }from"antd";
Versionsupported since 5.21.0

When To Use

Can be used to separate areas horizontally or vertically. When you need to freely drag and adjust the size of each area. When you need to specify the maximum and minimum width and height of an area.

Examples

First
Second

Initialize panel size, panel size limit.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
First
Second

Control the size of the splitter. When one of the panels disables resizable, dragging will be disabled.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
First
Second

Use vertical layout.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
First
Second
First
Second

Set collapsible to enable collapse. Can through min to limit dragging to expand when collapsed.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Panel 1
Panel 2
Panel 3

Multiple panels.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Left
Top
Bottom

Complex combination panel, quick folding, prohibited from changing size

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
First
Second
First
Second

Lazy mode, dragging does not update the size immediately, but updates when released.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.23.0
Panel 1
Panel 2
Panel 3
First
Second

customize handle elements and style

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
6.0.0

API

Common props ref:Common props

The Splitter component needs to calculate the panel size through its child elements, so its child elements only support Splitter.Panel.

Splitter

PropertyDescriptionTypeDefaultVersion
layoutLayout directionhorizontal | verticalhorizontal-
onResizeStartCallback before dragging starts(sizes: number[]) => void--
onResizePanel size change callback(sizes: number[]) => void--
onResizeEndDrag end callback(sizes: number[]) => void--
lazyLazy modebooleanfalse5.23.0
collapsibleIconcustom collapsible icon{start: ReactNode; end: ReactNode}-6.0.0
draggerIconcustom dragger iconReactNode-6.0.0

Panel

PropertyDescriptionTypeDefaultVersion
defaultSizeInitial panel size support number for px or 'percent%' usagenumber | string--
minMinimum threshold support number for px or 'percent%' usagenumber | string--
maxMaximum threshold support number for px or 'percent%' usagenumber | string--
sizeControlled panel size support number for px or 'percent%' usagenumber | string--
collapsibleQuick foldingboolean | { start?: boolean; end?: boolean }false-
resizableWhether to enable drag and dropbooleantrue-

Design Token

Component TokenHow to use?

Token NameDescriptionTypeDefault Value
splitBarDraggableSizeDrag and drop the identity element sizenumber20
splitBarSizeDrag the element display sizenumber2
splitTriggerSizeDrag and drop trigger area sizenumber6

Global TokenHow to use?