Splitter

Splits the area into multiple horizontal or vertical sides.
Import
Source components/splitter
Docs Edit this page

When To Use#

The Splitter component can be used to separate areas horizontally or vertically. You can freely drag the splitter to adjust the size of each side, while also being able to specify its minimum and maximum width and height.

Examples

First
Second
Basic

Initialize panel size, panel size limit.

      Loading...
First
Second
Vertical

Use vertical layout.

      Loading...
Panel 1
Panel 2
Panel 3
Multiple Panels

Multiple panels.

      Loading...
First
Second

First
Second
Lazy

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

      Loading...
First
Second
Control Mode

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

      Loading...
First
Second

First
Second
Collapsible

Set nzCollapsible to enable collapse. Can through nzMin to limit dragging to expand when collapsed.

      Loading...
Left
Top
Bottom
Complex combination

Complex combination panel, quick folding, prohibited from changing size.

      Loading...

API#

nz-splitter#

PropertyDescriptionTypeDefault
[nzLayout]Layout direction'horizontal' | 'vertical''horizontal'
[nzLazy]Lazy Modebooleanfalse
(nzResizeStart)Callback before dragging startsEventEmitter<number[]>-
(nzResize)Panel size change callbackEventEmitter<number[]>-
(nzResizeEnd)Drag end callbackEventEmitter<number[]>-

nz-splitter-panel#

PropertyDescriptionTypeDefault
[nzDefaultSize]Initial panel size support number for px or 'percent%' usagenumber | string-
[nzMin]Minimum threshold support number for px or 'percent%' usagenumber | string-
[nzMax]Maximum threshold support number for px or 'percent%' usagenumber | string-
[nzSize]Controlled panel size support number for px or 'percent%' usagenumber | string-
[nzCollapsible]Quick foldingboolean | { start?: boolean; end?: boolean }false
[nzResizable]Whether to enable drag and dropbooleantrue