feat(module:space): add nzSplit support (#6487)

NG-ZORRO · Mar 9, 2021 · c535f06 · c535f06
1 parent 4d28a60
commit c535f06
Show file tree

Hide file tree

Showing 16 changed files with 435 additions and 117 deletions.
diff --git a/components/space/demo/align.ts b/components/space/demo/align.ts
@@ -5,32 +5,27 @@ import { Component } from '@angular/core';
   template: `
     <div class="space-align-container">
       <div nz-space nzAlign="center" class="space-align-block">
-        <nz-space-item>center</nz-space-item>
-        <nz-space-item>
-          <button nz-button nzType="primary">Button</button>
-        </nz-space-item>
-        <span nz-space-item class="mock-block">Block</span>
+        <ng-container *nzSpaceItem>center</ng-container>
+        <button *nzSpaceItem nz-button nzType="primary">Button</button>
+        <span *nzSpaceItem class="mock-block">Block</span>
       </div>
+
       <div nz-space nzAlign="start" class="space-align-block">
-        <nz-space-item>start</nz-space-item>
-        <nz-space-item>
-          <button nz-button nzType="primary">Button</button>
-        </nz-space-item>
-        <span nz-space-item class="mock-block">Block</span>
+        <ng-container *nzSpaceItem>start</ng-container>
+        <button *nzSpaceItem nz-button nzType="primary">Button</button>
+        <span *nzSpaceItem class="mock-block">Block</span>
       </div>
+
       <div nz-space nzAlign="end" class="space-align-block">
-        <nz-space-item>end</nz-space-item>
-        <nz-space-item>
-          <button nz-button nzType="primary">Button</button>
-        </nz-space-item>
-        <span nz-space-item class="mock-block">Block</span>
+        <ng-container *nzSpaceItem>end</ng-container>
+        <button *nzSpaceItem nz-button nzType="primary">Button</button>
+        <span *nzSpaceItem class="mock-block">Block</span>
       </div>
+
       <div nz-space nzAlign="baseline" class="space-align-block">
-        <nz-space-item>baseline</nz-space-item>
-        <nz-space-item>
-          <button nz-button nzType="primary">Button</button>
-        </nz-space-item>
-        <span nz-space-item class="mock-block">Block</span>
+        <ng-container *nzSpaceItem>baseline</ng-container>
+        <button *nzSpaceItem nz-button nzType="primary">Button</button>
+        <span *nzSpaceItem class="mock-block">Block</span>
       </div>
     </div>
   `,

diff --git a/components/space/demo/basic.ts b/components/space/demo/basic.ts
@@ -4,17 +4,16 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-space-basic',
   template: `
     <nz-space>
-      <nz-space-item>
-        <button nz-button nzType="primary">Button</button>
-      </nz-space-item>
-      <nz-space-item>
-        <nz-upload nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76">
-          <button nz-button><i nz-icon nzType="upload"></i>Click to Upload</button>
-        </nz-upload>
-      </nz-space-item>
-      <nz-space-item>
-        <button nz-button nz-popconfirm nzOkText="Yes" nzCancelText="No" nzPopconfirmTitle="Are you sure delete this task?">Confirm</button>
-      </nz-space-item>
+      <button *nzSpaceItem nz-button nzType="primary">Button</button>
+      <nz-upload *nzSpaceItem nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76">
+        <button nz-button>
+          <i nz-icon nzType="upload"></i>
+          Click to Upload
+        </button>
+      </nz-upload>
+      <button *nzSpaceItem nz-button nz-popconfirm nzOkText="Yes" nzCancelText="No" nzPopconfirmTitle="Are you sure delete this task?">
+        Confirm
+      </button>
     </nz-space>
   `
 })

diff --git a/components/space/demo/customize.ts b/components/space/demo/customize.ts
@@ -5,18 +5,10 @@ import { Component } from '@angular/core';
   template: `
     <nz-slider [(ngModel)]="size"></nz-slider>
     <nz-space [nzSize]="size">
-      <nz-space-item>
-        <button nz-button nzType="primary">Button</button>
-      </nz-space-item>
-      <nz-space-item>
-        <button nz-button nzType="default">Default</button>
-      </nz-space-item>
-      <nz-space-item>
-        <button nz-button nzType="dashed">Dashed</button>
-      </nz-space-item>
-      <nz-space-item>
-        <a nz-button nzType="link">Link</a>
-      </nz-space-item>
+      <button *nzSpaceItem nz-button nzType="primary">Button</button>
+      <button *nzSpaceItem nz-button nzType="default">Default</button>
+      <button *nzSpaceItem nz-button nzType="dashed">Dashed</button>
+      <a *nzSpaceItem nz-button nzType="link">Link</a>
     </nz-space>
   `
 })

diff --git a/components/space/demo/module b/components/space/demo/module
@@ -1,11 +1,13 @@
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzCardModule } from 'ng-zorro-antd/card';
-import { NzUploadModule } from 'ng-zorro-antd/upload';
-import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzSliderModule } from 'ng-zorro-antd/slider';
+import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
 import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { NzSliderModule } from 'ng-zorro-antd/slider';
 import { NzSpaceModule } from 'ng-zorro-antd/space';
+import { NzTypographyModule } from 'ng-zorro-antd/typography';
+import { NzUploadModule } from 'ng-zorro-antd/upload';
 
 export const moduleList = [
   NzRadioModule,
@@ -15,5 +17,7 @@ export const moduleList = [
   NzSpaceModule,
   NzIconModule,
   NzPopconfirmModule,
-  NzCardModule
+  NzCardModule,
+  NzDividerModule,
+  NzTypographyModule
 ];
diff --git a/components/space/demo/size.ts b/components/space/demo/size.ts
@@ -9,18 +9,10 @@ import { Component } from '@angular/core';
       <label nz-radio nzValue="large">Large</label>
     </nz-radio-group>
     <nz-space [nzSize]="size">
-      <nz-space-item>
-        <button nz-button nzType="primary">Button</button>
-      </nz-space-item>
-      <nz-space-item>
-        <button nz-button nzType="default">Default</button>
-      </nz-space-item>
-      <nz-space-item>
-        <button nz-button nzType="dashed">Dashed</button>
-      </nz-space-item>
-      <nz-space-item>
-        <a nz-button nzType="link">Link</a>
-      </nz-space-item>
+      <button *nzSpaceItem nz-button nzType="primary">Button</button>
+      <button *nzSpaceItem nz-button nzType="default">Default</button>
+      <button *nzSpaceItem nz-button nzType="dashed">Dashed</button>
+      <a *nzSpaceItem nz-button nzType="link">Link</a>
     </nz-space>
   `
 })

diff --git a/components/space/demo/split.md b/components/space/demo/split.md
@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 分隔符
+  en-US: Split
+---
+
+## zh-CN
+
+相邻组件分隔符。
+
+## en-US
+
+Crowded components split.
diff --git a/components/space/demo/split.ts b/components/space/demo/split.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-space-split',
+  template: `
+    <nz-space [nzSplit]="spaceSplit">
+      <ng-template #spaceSplit>
+        <nz-divider nzType="vertical"></nz-divider>
+      </ng-template>
+
+      <a *nzSpaceItem nz-typography>Link</a>
+      <a *nzSpaceItem nz-typography>Link</a>
+      <a *nzSpaceItem nz-typography>Link</a>
+    </nz-space>
+  `
+})
+export class NzDemoSpaceSplitComponent {
+  size = 8;
+}
diff --git a/components/space/demo/vertical.ts b/components/space/demo/vertical.ts
@@ -4,18 +4,14 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-space-vertical',
   template: `
     <nz-space nzDirection="vertical">
-      <nz-space-item>
-        <nz-card nzTitle="Card" style="width: 300px">
-          <p>Card content</p>
-          <p>Card content</p>
-        </nz-card>
-      </nz-space-item>
-      <nz-space-item>
-        <nz-card nzTitle="Card" style="width: 300px">
-          <p>Card content</p>
-          <p>Card content</p>
-        </nz-card>
-      </nz-space-item>
+      <nz-card *nzSpaceItem nzTitle="Card" style="width: 300px">
+        <p>Card content</p>
+        <p>Card content</p>
+      </nz-card>
+      <nz-card *nzSpaceItem nzTitle="Card" style="width: 300px">
+        <p>Card content</p>
+        <p>Card content</p>
+      </nz-card>
     </nz-space>
   `
 })

diff --git a/components/space/doc/index.en-US.md b/components/space/doc/index.en-US.md
@@ -23,6 +23,8 @@ import { NzSpaceModule } from 'ng-zorro-antd/space';
 
 | Property | Description | Type | Default | Global Config |
 | --- | --- | --- | --- | --- |
-| `[nzSize]` | space size | `small` \| `middle` \| `large` \| `number` | `small` | ✅ |
-| `[nzDirection]` | space direction | `vertical` \| `horizontal` | `horizontal` |  |
-| `[nzAlign]` | align items | `start` \| `end` \| `baseline` \| `horizontal` | - | |
+| `[nzSize]` | The space size | `'small' \| 'middle' \| 'large' \| number` | `small` | ✅ |
+| `[nzDirection]` | The space direction | `'vertical' \| 'horizontal'` | `horizontal` |  |
+| `[nzAlign]` | Align items | `'start' \| 'end' \| 'baseline' \| 'center'` | - | |
+| `[nzWrap]` | Auto wrap line, when `horizontal` effective| `boolean` | `false` | |
+| `[nzSplit]` | Set split | `TemplateRef` | - | |
diff --git a/components/space/doc/index.zh-CN.md b/components/space/doc/index.zh-CN.md
@@ -26,6 +26,8 @@ import { NzSpaceModule } from 'ng-zorro-antd/space';
 
 | 参数 | 说明 | 类型 | 默认值 | 支持全局配置 |
 | --------- | -------- | ------------------------------------------ | ------------ | -- |
-| `[nzSize]`      | 间距大小 | `small` \| `middle` \| `large` \| `number` | `small`  | ✅ |
-| `[nzDirection]` | 间距方向 | `vertical` \| `horizontal` | `horizontal` | |
-| `[nzAlign]` | 对齐方式 | `start` \| `end` \| `baseline` \| `horizontal` | - | |
+| `[nzSize]`      | 间距大小 | `'small' \| 'middle' \| 'large' \| number` | `'small'`  | ✅ |
+| `[nzDirection]` | 间距方向 | `'vertical' \| 'horizontal'` | `horizontal` | |
+| `[nzAlign]` | 对齐方式 | `'start' \| 'end' \| 'baseline' \| 'center'` | - | |
+| `[nzWrap]` | 是否自动换行，仅在 `horizontal` 时有效 | `boolean` | `false` | |
+| `[nzSplit]` | 设置分隔符 | `TemplateRef` | - | |
diff --git a/components/space/space-item.component.ts b/components/space/space-item.component.ts
@@ -5,33 +5,32 @@
 
 import { ChangeDetectionStrategy, Component, ElementRef, OnInit, Renderer2 } from '@angular/core';
 
-import { NzSpaceDirection, NzSpaceSize } from './types';
-
-const spaceSize = {
-  small: 8,
-  middle: 16,
-  large: 24
-};
+import { NzSpaceDirection } from './types';
 
+/**
+ * @deprecated NzSpaceItemLegacyComponent will be removed on 12.0.0.
+ * @breaking-change 12.0.0
+ */
 @Component({
   selector: 'nz-space-item, [nz-space-item]',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: ` <ng-content></ng-content> `,
+  template: `
+    <ng-content></ng-content>
+  `,
   host: {
     class: 'ant-space-item'
   }
 })
-export class NzSpaceItemComponent implements OnInit {
+export class NzSpaceItemLegacyComponent implements OnInit {
   constructor(private renderer: Renderer2, private elementRef: ElementRef) {}
 
-  setDirectionAndSize(direction: NzSpaceDirection, size: number | NzSpaceSize): void {
-    const marginSize = typeof size === 'string' ? spaceSize[size] : size;
+  setDirectionAndSize(direction: NzSpaceDirection, size: number): void {
     if (direction === 'horizontal') {
       this.renderer.removeStyle(this.elementRef.nativeElement, 'margin-bottom');
-      this.renderer.setStyle(this.elementRef.nativeElement, 'margin-right', `${marginSize}px`);
+      this.renderer.setStyle(this.elementRef.nativeElement, 'margin-right', `${size}px`);
     } else {
       this.renderer.removeStyle(this.elementRef.nativeElement, 'margin-right');
-      this.renderer.setStyle(this.elementRef.nativeElement, 'margin-bottom', `${marginSize}px`);
+      this.renderer.setStyle(this.elementRef.nativeElement, 'margin-bottom', `${size}px`);
     }
   }
 

diff --git a/components/space/space-item.directive.ts b/components/space/space-item.directive.ts
@@ -0,0 +1,13 @@
+/**
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[nzSpaceItem]'
+})
+export class NzSpaceItemDirective {
+  constructor() {}
+}