Splitter

Splits the area into multiple horizontal or vertical sides.

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.

import { NzSplitterModule } from 'ng-zorro-antd/splitter';

Examples

First
Second
Basic

Initialize panel size, panel size limit.

expand codeexpand code
      Loading...
First
Second
Vertical

Use vertical layout.

expand codeexpand code
      Loading...
Panel 1
Panel 2
Panel 3
Multiple Panels

Multiple panels.

expand codeexpand code
      Loading...
First
Second

First
Second
Lazy

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

expand codeexpand code
      Loading...
First
Second
Control Mode

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

expand codeexpand code
      Loading...
First
Second

First
Second
Collapsible

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

expand codeexpand code
      Loading...
Left
Top
Bottom
Complex combination

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

expand codeexpand code
      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