ant-design/components/splitter/index.en-US.md

category	group	title	description	cover	coverDark	demo	tag
Components	Layout	Splitter	Split panels are used to isolate areas and display multiple contents.	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*f0SISaETY0wAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*y92yRYhObU8AAAAAAAAAAAAADrJ8AQ/original	cols 1	5.21.0

When To Use

You need to display multiple contents, and you want users to be able to adjust the size of each content freely.

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

Examples

Basic Control mode Vertical Collapsible Multiple panels Complex combination Debug

API

Common props ref：Common props

Splitter

Property	Description	Type	Default	Version
layout	Layout direction	horizontal | vertical	horizontal	-
onResizeStart	Callback before dragging starts	(sizes: number[]) => void	-	-
onResize	Panel size change callback	(sizes: number[]) => void	-	-
onResizeEnd	Drag end callback	(sizes: number[]) => void	-	-

Panel

Property	Description	Type	Default	Version
defaultSize	Initial panel size support number for px or 'percent%' usage	number | string	-	-
min	Minimum threshold support number for px or 'percent%' usage	number | string	-	-
max	Maximum threshold support number for px or 'percent%' usage	number | string	-	-
size	Controlled panel size support number for px or 'percent%' usage	number | string	-	-
collapsible	Quick folding	boolean | { start?: boolean; end?: boolean }	false	-
resizable	Whether to enable drag and drop	boolean	true	-

Design Token