Skip to content

Commit 9b3f62e

Browse files
LafferyLaffery
authored
feat(module:splitter): add splitter component (#8987)
* feat(module:splitter): basic usage * feat(module:splitter): add split bar directive * feat(module:splitter): handle resizing * feat(module:splitter): opt styles * feat(module:splitter): control mode * feat(module:splitter): lazy mode * feat(module:splitter): add collapse * feat(module:splitter): observe to container size change * feat(module:splitter): improve collapsible logic * feat(module:splitter): add unit tests * feat(module:splitter): restore prev size when expanding a collapsed pane * feat(module:splitter): support rtl
1 parent 1f07121 commit 9b3f62e

37 files changed

Lines changed: 2189 additions & 0 deletions

‎.github/CODEOWNERS‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ components/pagination/** @vthinkxie
5858
components/radio/** @vthinkxie
5959
components/select/** @vthinkxie
6060
components/spin/** @vthinkxie
61+
components/splitter/** @laffery
6162
components/switch/** @vthinkxie
6263
components/table/** @vthinkxie
6364
components/tree/** @simplejason

‎.github/nz-boot.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,3 +127,4 @@ issue:
127127
Transfer: Ricbet
128128
Pipes: chensimeng
129129
Image: stygian-desolator
130+
Splitter: laffery

‎components/components.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
@import './skeleton/style/entry.less';
4343
@import './slider/style/entry.less';
4444
@import './spin/style/entry.less';
45+
@import './splitter/style/entry.less';
4546
@import './statistic/style/entry.less';
4647
@import './steps/style/entry.less';
4748
@import './switch/style/entry.less';

‎components/splitter/demo/basic.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 0
3+
title:
4+
zh-CN: 基本用法
5+
en-US: Basic
6+
---
7+
8+
## zh-CN
9+
10+
初始化面板大小，面板大小限制。
11+
12+
## en-US
13+
14+
Initialize panel size, panel size limit.

‎components/splitter/demo/basic.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Component } from '@angular/core';
2+
3+
import { NzSplitterModule } from 'ng-zorro-antd/splitter';
4+
5+
@Component({
6+
selector: 'nz-demo-splitter-basic',
7+
imports: [NzSplitterModule],
8+
template: `
9+
<nz-splitter>
10+
<nz-splitter-panel nzDefaultSize="40%" nzMin="20%" nzMax="70%">
11+
<div class="box">First</div>
12+
</nz-splitter-panel>
13+
<nz-splitter-panel>
14+
<div class="box">Second</div>
15+
</nz-splitter-panel>
16+
</nz-splitter>
17+
`,
18+
styles: `
19+
nz-splitter {
20+
height: 200px;
21+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
22+
}
23+
24+
.box {
25+
height: 100%;
26+
display: flex;
27+
justify-content: center;
28+
align-items: center;
29+
}
30+
`
31+
})
32+
export class NzDemoSplitterBasicComponent {}

‎components/splitter/demo/collapsible.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 3
3+
title:
4+
zh-CN: 可折叠
5+
en-US: Collapsible
6+
---
7+
8+
## zh-CN
9+
10+
配置 `nzCollapsible` 提供快捷收缩能力。可以通过 `nzMin` 限制收缩后不能通过拖拽展开。
11+
12+
## en-US
13+
14+
Set `nzCollapsible` to enable collapse. Can through `nzMin` to limit dragging to expand when collapsed.

‎components/splitter/demo/collapsible.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Component } from '@angular/core';
2+
3+
import { NzSplitterModule } from 'ng-zorro-antd/splitter';
4+
5+
@Component({
6+
selector: 'nz-demo-splitter-collapsible',
7+
imports: [NzSplitterModule],
8+
template: `
9+
<nz-splitter>
10+
<nz-splitter-panel nzMin="20%" [nzCollapsible]="true">
11+
<div class="box">First</div>
12+
</nz-splitter-panel>
13+
<nz-splitter-panel [nzCollapsible]="true">
14+
<div class="box">Second</div>
15+
</nz-splitter-panel>
16+
</nz-splitter>
17+
<br />
18+
<nz-splitter nzLayout="vertical">
19+
<nz-splitter-panel nzMin="20%" [nzCollapsible]="true">
20+
<div class="box">First</div>
21+
</nz-splitter-panel>
22+
<nz-splitter-panel [nzCollapsible]="true">
23+
<div class="box">Second</div>
24+
</nz-splitter-panel>
25+
</nz-splitter>
26+
`,
27+
styles: `
28+
nz-splitter {
29+
height: 200px;
30+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
31+
}
32+
33+
.box {
34+
height: 100%;
35+
display: flex;
36+
justify-content: center;
37+
align-items: center;
38+
}
39+
`
40+
})
41+
export class NzDemoSplitterCollapsibleComponent {}

‎components/splitter/demo/complex.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 5
3+
title:
4+
zh-CN: 复杂组合
5+
en-US: Complex combination
6+
---
7+
8+
## zh-CN
9+
10+
复杂组合面板，快捷折叠，禁止改变大小。
11+
12+
## en-US
13+
14+
Complex combination panel, quick folding, prohibited from changing size.

‎components/splitter/demo/complex.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Component } from '@angular/core';
2+
3+
import { NzSplitterModule } from 'ng-zorro-antd/splitter';
4+
5+
@Component({
6+
selector: 'nz-demo-splitter-complex',
7+
imports: [NzSplitterModule],
8+
template: `
9+
<nz-splitter>
10+
<nz-splitter-panel [nzCollapsible]="true">
11+
<div class="box">Left</div>
12+
</nz-splitter-panel>
13+
<nz-splitter-panel>
14+
<nz-splitter nzLayout="vertical">
15+
<nz-splitter-panel>
16+
<div class="box">Top</div>
17+
</nz-splitter-panel>
18+
<nz-splitter-panel>
19+
<div class="box">Bottom</div>
20+
</nz-splitter-panel>
21+
</nz-splitter>
22+
</nz-splitter-panel>
23+
</nz-splitter>
24+
`,
25+
styles: `
26+
nz-splitter {
27+
height: 300px;
28+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
29+
}
30+
31+
.box {
32+
height: 100%;
33+
display: flex;
34+
justify-content: center;
35+
align-items: center;
36+
}
37+
`
38+
})
39+
export class NzDemoSplitterComplexComponent {}

‎components/splitter/demo/control.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 1
3+
title:
4+
zh-CN: 受控模式
5+
en-US: Control Mode
6+
---
7+
8+
## zh-CN
9+
10+
受控调整尺寸。当 Panel 之间任意一方禁用 `nzResizable`，则其拖拽将被禁用。
11+
12+
## en-US
13+
14+
Control the size of the splitter. When one of the panels disables `nzResizable`, dragging will be disabled.

0 commit comments

Comments
 (0)