feat(module:splitter): add splitter component

.github/CODEOWNERS

@@ -58,6 +58,7 @@ components/pagination/**                  @vthinkxie
 components/radio/**                       @vthinkxie
 components/select/**                      @vthinkxie
 components/spin/**                        @vthinkxie
+components/splitter/**                    @laffery
 components/switch/**                      @vthinkxie
 components/table/**                       @vthinkxie
 components/tree/**                        @simplejason

.github/nz-boot.yml

@@ -127,3 +127,4 @@ issue:
       Transfer: Ricbet
       Pipes: chensimeng
       Image: stygian-desolator
+      Splitter: laffery

components/components.less

@@ -42,6 +42,7 @@
 @import './skeleton/style/entry.less';
 @import './slider/style/entry.less';
 @import './spin/style/entry.less';
+@import './splitter/style/entry.less';
 @import './statistic/style/entry.less';
 @import './steps/style/entry.less';
 @import './switch/style/entry.less';

components/splitter/demo/basic.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 基本用法
+  en-US: Basic
+---
+
+## zh-CN
+
+初始化面板大小，面板大小限制。
+
+## en-US
+
+Initialize panel size, panel size limit.

components/splitter/demo/basic.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+
+import { NzSplitterModule } from 'ng-zorro-antd/splitter';
+
+@Component({
+  selector: 'nz-demo-splitter-basic',
+  imports: [NzSplitterModule],
+  template: `
+    <nz-splitter>
+      <nz-splitter-panel nzDefaultSize="40%" nzMin="20%" nzMax="70%">
+        <div class="box">First</div>
+      </nz-splitter-panel>
+      <nz-splitter-panel>
+        <div class="box">Second</div>
+      </nz-splitter-panel>
+    </nz-splitter>
+  `,
+  styles: `
+    nz-splitter {
+      height: 200px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+
+    .box {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  `
+})
+export class NzDemoSplitterBasicComponent {}

components/splitter/demo/collapsible.md

@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: 可折叠
+  en-US: Collapsible
+---
+
+## zh-CN
+
+配置 `nzCollapsible` 提供快捷收缩能力。可以通过 `nzMin` 限制收缩后不能通过拖拽展开。
+
+## en-US
+
+Set `nzCollapsible` to enable collapse. Can through `nzMin` to limit dragging to expand when collapsed.

components/splitter/demo/collapsible.ts

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+
+import { NzSplitterModule } from 'ng-zorro-antd/splitter';
+
+@Component({
+  selector: 'nz-demo-splitter-collapsible',
+  imports: [NzSplitterModule],
+  template: `
+    <nz-splitter>
+      <nz-splitter-panel nzMin="20%" [nzCollapsible]="true">
+        <div class="box">First</div>
+      </nz-splitter-panel>
+      <nz-splitter-panel [nzCollapsible]="true">
+        <div class="box">Second</div>
+      </nz-splitter-panel>
+    </nz-splitter>
+    <br />
+    <nz-splitter nzLayout="vertical">
+      <nz-splitter-panel nzMin="20%" [nzCollapsible]="true">
+        <div class="box">First</div>
+      </nz-splitter-panel>
+      <nz-splitter-panel [nzCollapsible]="true">
+        <div class="box">Second</div>
+      </nz-splitter-panel>
+    </nz-splitter>
+  `,
+  styles: `
+    nz-splitter {
+      height: 200px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+
+    .box {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  `
+})
+export class NzDemoSplitterCollapsibleComponent {}

components/splitter/demo/complex.md

@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 复杂组合
+  en-US: Complex combination
+---
+
+## zh-CN
+
+复杂组合面板，快捷折叠，禁止改变大小。
+
+## en-US
+
+Complex combination panel, quick folding, prohibited from changing size.

components/splitter/demo/complex.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+
+import { NzSplitterModule } from 'ng-zorro-antd/splitter';
+
+@Component({
+  selector: 'nz-demo-splitter-complex',
+  imports: [NzSplitterModule],
+  template: `
+    <nz-splitter>
+      <nz-splitter-panel [nzCollapsible]="true">
+        <div class="box">Left</div>
+      </nz-splitter-panel>
+      <nz-splitter-panel>
+        <nz-splitter nzLayout="vertical">
+          <nz-splitter-panel>
+            <div class="box">Top</div>
+          </nz-splitter-panel>
+          <nz-splitter-panel>
+            <div class="box">Bottom</div>
+          </nz-splitter-panel>
+        </nz-splitter>
+      </nz-splitter-panel>
+    </nz-splitter>
+  `,
+  styles: `
+    nz-splitter {
+      height: 300px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+
+    .box {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  `
+})
+export class NzDemoSplitterComplexComponent {}

components/splitter/demo/control.md

@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh-CN: 受控模式
+  en-US: Control Mode
+---
+
+## zh-CN
+
+受控调整尺寸。当 Panel 之间任意一方禁用 `nzResizable`，则其拖拽将被禁用。
+
+## en-US
+
+Control the size of the splitter. When one of the panels disables `nzResizable`, dragging will be disabled.

components/splitter/demo/control.ts

@@ -0,0 +1,50 @@
+import { Component, model, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzFlexModule } from 'ng-zorro-antd/flex';
+import { NzSplitterModule } from 'ng-zorro-antd/splitter';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+
+@Component({
+  selector: 'nz-demo-splitter-control',
+  imports: [FormsModule, NzButtonModule, NzFlexModule, NzSplitterModule, NzSwitchModule],
+  template: `
+    <nz-flex nzGap="middle" nzVertical>
+      <nz-splitter (nzResize)="setSizes($event)">
+        <nz-splitter-panel [nzSize]="sizes()[0]" [nzResizable]="resizable()">
+          <div class="box">First</div>
+        </nz-splitter-panel>
+        <nz-splitter-panel [nzSize]="sizes()[1]">
+          <div class="box">Second</div>
+        </nz-splitter-panel>
+      </nz-splitter>
+      <nz-flex nzJustify="space-between">
+        <nz-switch nzCheckedChildren="Enabled" nzUnCheckedChildren="Disabled" [(ngModel)]="resizable"></nz-switch>
+        <button nz-button (click)="sizes.set(['50%', '50%'])">Reset</button>
+      </nz-flex>
+    </nz-flex>
+  `,
+  styles: `
+    nz-splitter {
+      height: 200px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+
+    .box {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  `
+})
+export class NzDemoSplitterControlComponent {
+  resizable = model(true);
+  sizes = signal<Array<number | string>>(['50%', '50%']);
+
+  setSizes(sizes: Array<number | string>): void {
+    console.log('output', sizes);
+    this.sizes.set(sizes);
+  }
+}

components/splitter/demo/lazy.md

@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+  zh-CN: 延迟渲染模式
+  en-US: Lazy
+---
+
+## zh-CN
+
+延迟渲染模式，拖拽时不会立即更新大小，而是等到松手时才更新。
+
+## en-US
+
+Lazy mode, dragging does not update the size immediately, but updates when released.

components/splitter/demo/lazy.ts

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+
+import { NzSplitterModule } from 'ng-zorro-antd/splitter';
+
+@Component({
+  selector: 'nz-demo-splitter-lazy',
+  imports: [NzSplitterModule],
+  template: `
+    <nz-splitter nzLazy>
+      <nz-splitter-panel nzDefaultSize="40%" nzMin="20%" nzMax="70%">
+        <div class="box">First</div>
+      </nz-splitter-panel>
+      <nz-splitter-panel>
+        <div class="box">Second</div>
+      </nz-splitter-panel>
+    </nz-splitter>
+    <br />
+    <nz-splitter nzLazy nzLayout="vertical">
+      <nz-splitter-panel nzDefaultSize="40%" nzMin="30%" nzMax="70%">
+        <div class="box">First</div>
+      </nz-splitter-panel>
+      <nz-splitter-panel>
+        <div class="box">Second</div>
+      </nz-splitter-panel>
+    </nz-splitter>
+  `,
+  styles: `
+    nz-splitter {
+      height: 200px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+
+    .box {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  `
+})
+export class NzDemoSplitterLazyComponent {}

components/splitter/demo/multiple.md

@@ -0,0 +1,14 @@
+---
+order: 4
+title:
+  zh-CN: 多面板
+  en-US: Multiple Panels
+---
+
+## zh-CN
+
+多面板。
+
+## en-US
+
+Multiple panels.

components/splitter/demo/multiple.ts

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+
+import { NzSplitterModule } from 'ng-zorro-antd/splitter';
+
+@Component({
+  selector: 'nz-demo-splitter-multiple',
+  imports: [NzSplitterModule],
+  template: `
+    <nz-splitter>
+      <nz-splitter-panel [nzCollapsible]="true">
+        <div class="box">Panel 1</div>
+      </nz-splitter-panel>
+      <nz-splitter-panel [nzCollapsible]="{ start: true }">
+        <div class="box">Panel 2</div>
+      </nz-splitter-panel>
+      <nz-splitter-panel>
+        <div class="box">Panel 3</div>
+      </nz-splitter-panel>
+    </nz-splitter>
+  `,
+  styles: `
+    nz-splitter {
+      height: 200px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+
+    .box {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  `
+})
+export class NzDemoSplitterMultipleComponent {}

components/splitter/demo/vertical.md

@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh-CN: 垂直方向
+  en-US: Vertical
+---
+
+## zh-CN
+
+使用垂直布局。
+
+## en-US
+
+Use vertical layout.