Splitter

Divide a region into resizable panels.

When to use

Use Splitter when adjacent persistent regions need user-controlled relative space.

Examples

Basic

Initialize panel size, panel size limit.

Control mode

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

Vertical

Use vertical layout.

Collapsible

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

Control collapsible icons

Set collapsible.showCollapsibleIcon to control the display mode of collapsible icons.

Multiple panels

Multiple panels.

Complex combination

Complex combination panel, quick folding, prohibited from changing size

Lazy

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

Customize

customize handle elements and style

Custom semantic dom styling

You can customize the semantic dom style of Splitter by passing objects/functions through classNames and styles.

Double-clicked reset

Double-click the dragger to reset the Splitter.Panel to its default size.

API

Splitter, Splitter.Panel, and their props are exported from @ceebee/ui/client.

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>`	`-`	6.0.0
`collapsible`	motion to enable collapse animation, icon to customize collapse icons	`{ motion?: boolean; icon?: { start?: ReactNode; end?: ReactNode } }`	`-`	6.4.0
`collapsibleIcon`	custom collapsible icon	`{start?: ReactNode; end?: ReactNode}`	`-`	6.0.0
`destroyOnHidden`	Destroy panel content when collapsed (size is 0). Applies to all panels, can be overridden per panel	`boolean`	`false`	6.4.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>`	`-`	6.0.0
`vertical`	Orientation. Simultaneously existing with orientation, orientation takes priority	`boolean`	`false`	—
`onDraggerDoubleClick`	Callback triggered when the dragger is double-clicked	`(index: number) => void`	`-`	6.3.0
`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`	`-`	-
`destroyOnHidden`	Destroy panel content when collapsed (size is 0). Overrides Splitter's destroyOnHidden	`boolean`	`-`	6.4.0
`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`	`-`	-