feat(module:space): add new component (#4928)

close #4913

components/components.less

@@ -58,3 +58,4 @@
 @import "./tree-select/style/entry.less";
 @import "./calendar/style/entry.less";
 @import "./result/style/entry.less";
+@import "./space/style/entry.less";

components/core/config/config.ts

@@ -37,6 +37,7 @@ export interface NzConfig {
   pageHeader?: PageHeaderConfig;
   progress?: ProgressConfig;
   rate?: RateConfig;
+  space?: SpaceConfig;
   spin?: SpinConfig;
   switch?: SwitchConfig;
   table?: TableConfig;
@@ -185,6 +186,10 @@ export interface RateConfig {
   nzAllowHalf?: boolean;
 }
 
+export interface SpaceConfig {
+  nzSize?: 'small' | 'middle' | 'large' | number;
+}
+
 export interface SpinConfig {
   nzIndicator?: TemplateRef<void>;
 }

components/space/demo/basic.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 基本用法
+  en-US: Basic Usage
+---
+
+## zh-CN
+
+相邻组件水平间距。
+
+## en-US
+
+Crowded components horizontal spacing.

components/space/demo/basic.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+@Component({
+  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><span>Click to Upload</span></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>
+    </nz-space>
+  `
+})
+export class NzDemoSpaceBasicComponent {}

components/space/demo/customize.md

@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: 自定义尺寸
+  en-US: Customize Size
+---
+
+## zh-CN
+
+自定义间距大小。
+
+## en-US
+
+Custom spacing size.

components/space/demo/customize.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-space-customize',
+  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>
+    </nz-space>
+  `
+})
+export class NzDemoSpaceCustomizeComponent {
+  size = 8;
+}

components/space/demo/module

@@ -0,0 +1,19 @@
+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 { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzSliderModule } from 'ng-zorro-antd/slider';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
+
+export const moduleList = [
+  NzRadioModule,
+  NzSliderModule,
+  NzUploadModule,
+  NzButtonModule,
+  NzSpaceModule,
+  NzIconModule,
+  NzPopconfirmModule,
+  NzCardModule
+];

components/space/demo/size.md

@@ -0,0 +1,18 @@
+---
+order: 2
+title:
+  zh-CN: 间距大小
+  en-US: Space Size
+---
+
+## zh-CN
+
+间距预设大、中、小三种大小。
+
+通过设置 `nzSize` 为 `large` `middle` 分别把间距设为大、中间距。若不设置 `nzSize`，则间距为小。
+
+## en-US
+
+`large`, `middle` and `small` preset sizes.
+
+Set the `nzSize` to `large` and `middle` by setting size to large and middle respectively. If `size` is not set, the spacing is `small`.

components/space/demo/size.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-space-size',
+  template: `
+    <nz-radio-group [(ngModel)]="size">
+      <label nz-radio nzValue="small">Small</label>
+      <label nz-radio nzValue="middle">Middle</label>
+      <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>
+    </nz-space>
+  `
+})
+export class NzDemoSpaceSizeComponent {
+  size = 'small';
+}

components/space/demo/vertical.md

@@ -0,0 +1,16 @@
+---
+order: 1
+title:
+  zh-CN: 垂直间距
+  en-US: Vertical Space
+---
+
+## zh-CN
+
+相邻组件垂直间距。
+
+可以设置 `width: 100%` 独占一行。
+
+## en-US
+
+Crowded components vertical spacing.

components/space/demo/vertical.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+@Component({
+  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-space>
+  `
+})
+export class NzDemoSpaceVerticalComponent {}

components/space/doc/index.en-US.md

@@ -0,0 +1,26 @@
+---
+category: Components
+type: Layout
+cols: 1
+title: Space
+---
+
+Set components spacing.
+
+## When To Use
+
+Avoid components clinging together and set a unified space.
+
+```ts
+import { NzSpaceModule } from 'ng-zorro-antd/space';
+```
+
+## API
+
+### nz-space
+
+
+| Property | Description | Type | Default | Global Config |
+| --- | --- | --- | --- | --- |
+| `[nzSize]` | space size | `small` \| `middle` \| `large` \| `number` | `small` | ✅ |
+| `[nzDirection]` | space direction | `vertical` \| `horizontal` | `horizontal` |  |

components/space/doc/index.zh-CN.md

@@ -0,0 +1,26 @@
+---
+category: Components
+type: 布局
+subtitle: 间距
+title: Space
+cols: 1
+---
+
+Set components spacing.
+
+## 何时使用
+
+Avoid components clinging together and set a unified space.
+
+```ts
+import { NzSpaceModule } from 'ng-zorro-antd/space';
+```
+
+## API
+
+## nz-space
+
+| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 |
+| --------- | -------- | ------------------------------------------ | ------------ | -- |
+| `[nzSize]`      | 间距大小 | `small` \| `middle` \| `large` \| `number` | `small`  | ✅ |
+| `[nzDirection]` | 间距方向 | `vertical` \| `horizontal` | `horizontal` | |

components/space/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * 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
+ */
+
+export * from './public-api';

components/space/package.json

@@ -0,0 +1,7 @@
+{
+  "ngPackage": {
+    "lib": {
+      "entryFile": "public-api.ts"
+    }
+  }
+}

components/space/public-api.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * 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
+ */
+
+export * from './space.module';
+export * from './space.component';
+export * from './space-item.component';

components/space/space-item.component.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * 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 { ChangeDetectionStrategy, Component, ElementRef, OnInit, Renderer2 } from '@angular/core';
+
+import { NzSpaceDirection, NzSpaceSize } from './types';
+
+const spaceSize = {
+  small: 8,
+  middle: 16,
+  large: 24
+};
+
+@Component({
+  selector: 'nz-space-item, [nz-space-item]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <ng-content></ng-content>
+  `,
+  host: {
+    class: 'ant-space-item'
+  }
+})
+export class NzSpaceItemComponent implements OnInit {
+  constructor(private renderer: Renderer2, private elementRef: ElementRef) {}
+
+  setDirectionAndSize(direction: NzSpaceDirection, size: number | NzSpaceSize): void {
+    const marginSize = typeof size === 'string' ? spaceSize[size] : size;
+    if (direction === 'horizontal') {
+      this.renderer.removeStyle(this.elementRef.nativeElement, 'margin-bottom');
+      this.renderer.setStyle(this.elementRef.nativeElement, 'margin-right', `${marginSize}px`);
+    } else {
+      this.renderer.removeStyle(this.elementRef.nativeElement, 'margin-right');
+      this.renderer.setStyle(this.elementRef.nativeElement, 'margin-bottom', `${marginSize}px`);
+    }
+  }
+
+  ngOnInit(): void {}
+}