延迟渲染模式

Splitter分隔面板

自由切分指定区域。

使用

源码

components/splitter

文档

何时使用#

可以水平或垂直地分隔区域。
当需要自由拖拽调整各区域大小。
当需要指定区域的最大最小宽高时。

代码演示

First

Second

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

      加载中

First

Second

使用垂直布局。

      加载中

Panel 1

Panel 2

Panel 3

多面板。

      加载中

First

Second

First

Second

延迟渲染模式

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

      加载中

First

Second

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

      加载中

First

Second

First

Second

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

      加载中

Left

Top

Bottom

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

      加载中

API#

nz-splittercomponent#

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

nz-splitter-panelcomponent#

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