Splitter分隔面板

自由切分指定区域。

何时使用#

  • 可以水平或垂直地分隔区域。
  • 当需要自由拖拽调整各区域大小。
  • 当需要指定区域的最大最小宽高时。
import { NzSplitterModule } from 'ng-zorro-antd/splitter';

代码演示

First
Second
基本用法

初始化面板大小，面板大小限制。

expand codeexpand code
      加载中
First
Second
垂直方向

使用垂直布局。

expand codeexpand code
      加载中
Panel 1
Panel 2
Panel 3
多面板

多面板。

expand codeexpand code
      加载中
First
Second

First
Second
延迟渲染模式

延迟渲染模式，拖拽时不会立即更新大小，而是等到松手时才更新。

expand codeexpand code
      加载中
First
Second
受控模式

受控调整尺寸。当 Panel 之间任意一方禁用 nzResizable，则其拖拽将被禁用。

expand codeexpand code
      加载中
First
Second

First
Second
可折叠

配置 nzCollapsible 提供快捷收缩能力。可以通过 nzMin 限制收缩后不能通过拖拽展开。

expand codeexpand code
      加载中
Left
Top
Bottom
复杂组合

复杂组合面板，快捷折叠，禁止改变大小。

expand codeexpand code
      加载中

API#

nz-splitter#

参数说明类型默认值
[nzLayout]布局方向'horizontal' | 'vertical''horizontal'
[nzLazy]延迟渲染模式booleanfalse
(nzResizeStart)开始拖拽之前回调EventEmitter<number[]>-
(nzResize)面板大小变化回调EventEmitter<number[]>-
(nzResizeEnd)拖拽结束回调EventEmitter<number[]>-

nz-splitter-panel#

参数说明类型默认值
[nzDefaultSize]初始面板大小，支持数字 px 或者文字 '百分比%' 类型number | string-
[nzMin]最小阈值，支持数字 px 或者文字 '百分比%' 类型number | string-
[nzMax]最大阈值，支持数字 px 或者文字 '百分比%' 类型number | string-
[nzSize]受控面板大小，支持数字 px 或者文字 '百分比%' 类型number | string-
[nzCollapsible]快速折叠boolean | { start?: boolean; end?: boolean }false
[nzResizable]是否开启拖拽伸缩booleantrue