feat(module:space): add nzSplit support

NG-ZORRO · Mar 5, 2021 · 2db10e3 · 2db10e3
1 parent 85ea273
commit 2db10e3
Show file tree

Hide file tree

Showing 14 changed files with 187 additions and 105 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,18 +4,19 @@ 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>
   `
 })
-export class NzDemoSpaceBasicComponent {}
+export class NzDemoSpaceBasicComponent {
+  arr = new Array(20);
+}
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/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() {}
+}
diff --git a/components/space/space.component.spec.ts b/components/space/space.component.spec.ts
@@ -4,7 +4,7 @@ import { By } from '@angular/platform-browser';
 import { NzSpaceAlign } from 'ng-zorro-antd/space';
 import { NzSpaceComponent } from 'ng-zorro-antd/space/space.component';
 
-import { NzSpaceItemComponent } from './space-item.component';
+import { NzSpaceItemLegacyComponent } from './space-item.component';
 import { NzSpaceModule } from './space.module';
 
 describe('Space', () => {
@@ -29,7 +29,7 @@ describe('Space', () => {
   });
 
   it('should render size when the items changes', () => {
-    let items = fixture.debugElement.queryAll(By.directive(NzSpaceItemComponent));
+    let items = fixture.debugElement.queryAll(By.directive(NzSpaceItemLegacyComponent));
     expect(items.length).toBe(2);
 
     items.forEach(item => {
@@ -40,7 +40,7 @@ describe('Space', () => {
     component.show = true;
     fixture.detectChanges();
 
-    items = fixture.debugElement.queryAll(By.directive(NzSpaceItemComponent));
+    items = fixture.debugElement.queryAll(By.directive(NzSpaceItemLegacyComponent));
     expect(items.length).toBe(3);
     items.forEach(item => {
       const element = item.nativeElement as HTMLElement;
@@ -49,7 +49,7 @@ describe('Space', () => {
   });
 
   it('should render size', () => {
-    const items = fixture.debugElement.queryAll(By.directive(NzSpaceItemComponent));
+    const items = fixture.debugElement.queryAll(By.directive(NzSpaceItemLegacyComponent));
     items.forEach(item => {
       const element = item.nativeElement as HTMLElement;
       expect(element.style.marginRight).toBe('8px');
@@ -76,7 +76,7 @@ describe('Space', () => {
     component.size = 36;
     fixture.detectChanges();
 
-    const items = fixture.debugElement.queryAll(By.directive(NzSpaceItemComponent));
+    const items = fixture.debugElement.queryAll(By.directive(NzSpaceItemLegacyComponent));
     items.forEach(item => {
       const element = item.nativeElement as HTMLElement;
       expect(element.style.marginRight).toBe('36px');
@@ -92,7 +92,7 @@ describe('Space', () => {
   });
 
   it('should set direction', () => {
-    const items = fixture.debugElement.queryAll(By.directive(NzSpaceItemComponent));
+    const items = fixture.debugElement.queryAll(By.directive(NzSpaceItemLegacyComponent));
 
     component.direction = 'vertical';
     fixture.detectChanges();