feat(module:spin): now supports fullscreen

components/spin/demo/fullscreen.md

@@ -0,0 +1,14 @@
+---
+order: 7
+title:
+  zh-CN: 全屏
+  en-US: Fullscreen
+---
+
+## zh-CN
+
+`fullscreen` 属性非常适合创建流畅的页面加载器。它添加了半透明覆盖层，并在其中心放置了一个旋转加载符号。
+
+## en-US
+
+The `fullscreen` mode is perfect for creating page loaders. It adds a dimmed overlay with a centered spinner.

components/spin/demo/fullscreen.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-spin-fullscreen',
+  template: `
+    <button nz-button nzType="default" (click)="showSpinner()">Show fullscreen for 3s</button>
+    <nz-spin nzSimple [nzSpinning]="isSpinning" [nzFullscreen]="true"></nz-spin>
+  `
+})
+export class NzDemoSpinFullscreenComponent {
+  public isSpinning = false;
+
+  public showSpinner(): void {
+    this.isSpinning = true;
+
+    setTimeout(() => {
+      this.isSpinning = false;
+    }, 3000);
+  }
+}

components/spin/demo/module

@@ -2,5 +2,6 @@ import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { NzAlertModule } from 'ng-zorro-antd/alert';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { NzButtonModule } from 'ng-zorro-antd/button';
 
-export const moduleList = [ NzSpinModule, NzAlertModule, NzIconModule, NzSwitchModule ];
+export const moduleList = [ NzSpinModule, NzAlertModule, NzIconModule, NzSwitchModule, NzButtonModule ];

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

@@ -19,11 +19,12 @@ import { NzSpinModule } from 'ng-zorro-antd/spin';
 
 ### nz-spin
 
-| Property | Description | Type | Default Value | Global Config |
-| -------- | ----------- | ---- | ------------- | ------------- |
-| `[nzDelay]` | specifies a delay in milliseconds for loading state (prevent flush), unit: milliseconds | `number` | - |
-| `[nzIndicator]` | the spinning indicator | `TemplateRef<void>` | - | ✅ |
-| `[nzSize]` | size of Spin | `'large' \| 'small' \| 'default'` | `'default'` |
-| `[nzSpinning]` | whether Spin is spinning | `boolean` | `true` |
-| `[nzSimple]` | whether Spin has no children | `boolean` | `false` |
-| `[nzTip]` | customize description content when Spin has children | `string` | - |
+| Property         | Description                                                                             | Type                              | Default Value | Global Config |
+| ---------------- | --------------------------------------------------------------------------------------- | --------------------------------- | ------------- | ------------- |
+| `[nzDelay]`      | specifies a delay in milliseconds for loading state (prevent flush), unit: milliseconds | `number`                          | -             |
+| `[nzIndicator]`  | the spinning indicator                                                                  | `TemplateRef<void>`               | -             | ✅            |
+| `[nzSize]`       | size of Spin                                                                            | `'large' \| 'small' \| 'default'` | `'default'`   |
+| `[nzSpinning]`   | whether Spin is spinning                                                                | `boolean`                         | `true`        |
+| `[nzSimple]`     | whether Spin has no children                                                            | `boolean`                         | `false`       |
+| `[nzTip]`        | customize description content when Spin has children                                    | `string`                          | -             |
+| `[nzFullscreen]` | display a backdrop with the `Spin` component                                            | `boolean`                         | `false`       |

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

@@ -20,11 +20,12 @@ import { NzSpinModule } from 'ng-zorro-antd/spin';
 
 ### nz-spin
 
-| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
-| --- | --- | --- | --- | --- |
-| `[nzDelay]` | 延迟显示加载效果的时间（防止闪烁），单位：毫秒 | `number` | - |
-| `[nzIndicator]` | 加载指示符 | `TemplateRef<void>` | - | ✅ |
-| `[nzSize]` | 组件大小 | `'large' \| 'small' \| 'default'` | `'default'` |
-| `[nzSpinning]` | 是否旋转 | `boolean` | `true` |
-| `[nzSimple]` | 是否包裹元素 | `boolean` | `false` |
-| `[nzTip]` | 当作为包裹元素时，可以自定义描述文案 | `string` | - |
+| 参数             | 说明                                           | 类型                              | 默认值      | 全局配置 |
+| ---------------- | ---------------------------------------------- | --------------------------------- | ----------- | -------- |
+| `[nzDelay]`      | 延迟显示加载效果的时间（防止闪烁），单位：毫秒 | `number`                          | -           |
+| `[nzIndicator]`  | 加载指示符                                     | `TemplateRef<void>`               | -           | ✅       |
+| `[nzSize]`       | 组件大小                                       | `'large' \| 'small' \| 'default'` | `'default'` |
+| `[nzSpinning]`   | 是否旋转                                       | `boolean`                         | `true`      |
+| `[nzSimple]`     | 是否包裹元素                                   | `boolean`                         | `false`     |
+| `[nzTip]`        | 当作为包裹元素时，可以自定义描述文案           | `string`                          | -           |
+| `[nzFullscreen]` | 显示带有 `Spin` 组件的背景                     | `boolean`                         | `false`     |

components/spin/spin.component.ts

@@ -47,6 +47,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'spin';
         [class.ant-spin-lg]="nzSize === 'large'"
         [class.ant-spin-sm]="nzSize === 'small'"
         [class.ant-spin-show-text]="nzTip"
+        [class.ant-spin-fullscreen]="nzFullscreen"
       >
         <ng-template [ngTemplateOutlet]="nzIndicator || defaultTemplate"></ng-template>
         <div class="ant-spin-text" *ngIf="nzTip">{{ nzTip }}</div>
@@ -57,7 +58,8 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'spin';
     </div>
   `,
   host: {
-    '[class.ant-spin-nested-loading]': '!nzSimple'
+    '[class.ant-spin-nested-loading]': '!nzSimple',
+    '[class.ant-spin-nested-loading-fullscreen]': '!nzSimple && nzFullscreen'
   }
 })
 export class NzSpinComponent implements OnChanges, OnDestroy, OnInit {
@@ -73,6 +75,7 @@ export class NzSpinComponent implements OnChanges, OnDestroy, OnInit {
   @Input() @InputNumber() nzDelay = 0;
   @Input() @InputBoolean() nzSimple = false;
   @Input() @InputBoolean() nzSpinning = true;
+  @Input() @InputBoolean() nzFullscreen = false;
   private destroy$ = new Subject<void>();
   private spinning$ = new BehaviorSubject(this.nzSpinning);
   private delay$ = new ReplaySubject<number>(1);

components/spin/spin.spec.ts

@@ -149,6 +149,31 @@ describe('spin', () => {
       expect(spin.nativeElement.querySelector('.ant-spin').classList).not.toContain('ant-spin-rtl');
     });
   });
+
+  describe('spin fullscreen', () => {
+    it('should div with classname ant-spin also have the correct class name', () => {
+      const fixture = TestBed.createComponent(NzTestSpinBasicComponent);
+      const spin = fixture.debugElement.query(By.directive(NzSpinComponent));
+      fixture.detectChanges();
+      expect(spin.nativeElement.querySelector('.ant-spin').classList).not.toContain('ant-spin-fullscreen');
+      fixture.componentInstance.isFullscreen = true;
+      fixture.detectChanges();
+      expect(spin.nativeElement.querySelector('.ant-spin').classList).toContain('ant-spin-fullscreen');
+    });
+
+    it('should spin component have the correct classname when nested and fullscreen is active', () => {
+      const fixture = TestBed.createComponent(NzTestSpinBasicComponent);
+      const spin = fixture.debugElement.query(By.directive(NzSpinComponent));
+      fixture.componentInstance.isFullscreen = false;
+      fixture.componentInstance.simple = true;
+      fixture.detectChanges();
+      expect(spin.nativeElement.classList).not.toContain('ant-spin-nested-loading-fullscreen');
+      fixture.componentInstance.isFullscreen = true;
+      fixture.componentInstance.simple = false;
+      fixture.detectChanges();
+      expect(spin.nativeElement.classList).toContain('ant-spin-nested-loading-fullscreen');
+    });
+  });
 });
 
 @Component({
@@ -163,6 +188,7 @@ describe('spin', () => {
       [nzSpinning]="spinning"
       [nzSimple]="simple"
       [nzIndicator]="indicator"
+      [nzFullscreen]="isFullscreen"
     >
       <div>test</div>
     </nz-spin>
@@ -177,6 +203,7 @@ export class NzTestSpinBasicComponent {
   indicator?: TemplateRef<void>;
   tip?: string;
   simple = false;
+  isFullscreen = false;
 
   constructor(public nzConfigService: NzConfigService) {}
 }

components/spin/style/index.less

@@ -73,6 +73,34 @@
         margin-top: -(@spin-dot-size-lg / 2) - 10px;
       }
     }
+
+    &-fullscreen {
+      > div > .@{spin-prefix-cls} {
+        max-height: unset;
+
+        .@{spin-prefix-cls}-text {
+          color: @white;
+          text-shadow: unset;
+        }
+      }
+    }
+  }
+
+  &-fullscreen,
+  &-nested-loading-fullscreen > div > .@{spin-prefix-cls} {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    background-color: rgba(0, 0, 0, 0.45);
+    z-index: 1000;
+    max-height: unset;
+
+    .ant-spin-dot-item {
+      background-color: @white;
+    }
   }
 
   &-container {