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

category, group, title, description, cover, coverDark, demo

category	group	title	description	cover	coverDark	demo
Components	Layout	Splitter	Split panels to isolate	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*f0SISaETY0wAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*y92yRYhObU8AAAAAAAAAAAAADrJ8AQ/original	cols 1

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

Basic Control mode Vertical Collapsible Control collapsible icons Multiple panels Complex combination Lazy Customize Custom semantic dom styling Nested in tabs Debug Size Mix

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

Property	Description	Type	Default	Version
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string>	-
collapsibleIcon	custom collapsible icon	{start: ReactNode; end: ReactNode}	-	6.0.0
draggerIcon	custom dragger icon	ReactNode	-	6.0.0
layout	Layout direction	horizontal | vertical	horizontal	-
lazy	Lazy mode	boolean	false	5.23.0
onCollapse	Callback when expanding or collapsing	(collapsed: boolean[], sizes: number[]) => void	-	5.28.0
orientation	Orientation direction	horizontal | vertical	horizontal
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties>	-
vertical	Orientation，Simultaneously existing with orientation, orientation takes priority	boolean	false
onResize	Panel size change callback	(sizes: number[]) => void	-	-
onResizeEnd	Drag end callback	(sizes: number[]) => void	-	-
onResizeStart	Callback before dragging starts	(sizes: number[]) => void	-	-

Panel

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

Semantic DOM

Design Token