feat(module:result): add component (#3731)

close #2759

components/components.less

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

components/ng-zorro-antd.module.ts

@@ -51,6 +51,7 @@ import { NzPopoverModule } from 'ng-zorro-antd/popover';
 import { NzProgressModule } from 'ng-zorro-antd/progress';
 import { NzRadioModule } from 'ng-zorro-antd/radio';
 import { NzRateModule } from 'ng-zorro-antd/rate';
+import { NzResultModule } from 'ng-zorro-antd/result';
 import { NzSelectModule } from 'ng-zorro-antd/select';
 import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
 import { NzSliderModule } from 'ng-zorro-antd/slider';
@@ -113,6 +114,7 @@ export * from 'ng-zorro-antd/popover';
 export * from 'ng-zorro-antd/progress';
 export * from 'ng-zorro-antd/radio';
 export * from 'ng-zorro-antd/rate';
+export * from 'ng-zorro-antd/result';
 export * from 'ng-zorro-antd/select';
 export * from 'ng-zorro-antd/skeleton';
 export * from 'ng-zorro-antd/slider';
@@ -179,6 +181,7 @@ export * from 'ng-zorro-antd/version';
     NzProgressModule,
     NzRadioModule,
     NzRateModule,
+    NzResultModule,
     NzSelectModule,
     NzSkeletonModule,
     NzSliderModule,

components/result/demo/custom.md

@@ -0,0 +1,14 @@
+---
+order: 8
+title:
+  zh-CN: 自定义 icon
+  en-US: Custom Icon
+---
+
+## zh-CN
+
+自定义 icon。
+
+## en-US
+
+Custom icon.

components/result/demo/custom.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-result-custom',
+  template: `
+    <nz-result [nzIcon]="'smile-twotone'" [nzTitle]="'Great, we have done all the operators!'">
+      <div nz-result-extra>
+        <button nz-button nzType="primary">Next</button>
+      </div>
+    </nz-result>
+  `
+})
+export class NzDemoResultCustomComponent {}

components/result/demo/error.md

@@ -0,0 +1,14 @@
+---
+order: 7
+title:
+  zh-CN: Error
+  en-US: Error
+---
+
+## zh-CN
+
+复杂的错误反馈。
+
+## en-US
+
+Complex error feedback.

components/result/demo/error.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-result-error',
+  template: `
+    <nz-result
+      nzTitle="Submission Failed"
+      nzStatus="error"
+      nzSubTitle="Please check and modify the following information before resubmitting."
+    >
+      <div nz-result-content>
+        <div class="desc">
+          <h4 nz-title>The content you submitted has the following error:</h4>
+          <p nz-paragraph>
+            <i nz-icon nzType="close-circle"></i>
+            Your account has been frozen <a>Thaw immediately &gt;</a>
+          </p>
+          <p nz-paragraph>
+            <i nz-icon type="close-circle"></i>
+            Your account is not yet eligible to apply <a>Apply immediately &gt;</a>
+          </p>
+        </div>
+      </div>
+      <div nz-result-extra>
+        <button nz-button nzType="primary">Go Console</button>
+        <button nz-button>Buy Again</button>
+      </div>
+    </nz-result>
+  `
+})
+export class NzDemoResultErrorComponent {}

components/result/demo/fof.md

@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 404
+  en-US: 404
+---
+
+## zh-CN
+
+此页面未找到。
+
+## en-US
+
+The page you visited does not exist.

components/result/demo/fof.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-result-fof',
+  template: `
+    <nz-result nzStatus="404" nzTitle="404" nzSubTitle="Sorry, the page you visited does not exist.">
+      <div nz-result-extra>
+        <button nz-button nzType="primary">Back Home</button>
+      </div>
+    </nz-result>
+  `
+})
+export class NzDemoResultFofComponent {}

components/result/demo/foo.md

@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+  zh-CN: 500
+  en-US: 500
+---
+
+## zh-CN
+
+服务器发生了错误。
+
+## en-US
+
+There is an error on server.

components/result/demo/foo.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-result-foo',
+  template: `
+    <nz-result nzStatus="500" nzTitle="500" nzSubTitle="Sorry, there is an error on server.">
+      <div nz-result-extra>
+        <button nz-button nzType="primary">Back Home</button>
+      </div>
+    </nz-result>
+  `
+})
+export class NzDemoResultFooComponent {}

components/result/demo/fot.md

@@ -0,0 +1,14 @@
+---
+order: 4
+title:
+  zh-CN: 403
+  en-US: 403
+---
+
+## zh-CN
+
+你没有此页面的访问权限。
+
+## en-US
+
+You are not authorized to access this page.

components/result/demo/fot.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-result-fot',
+  template: `
+    <nz-result nzStatus="403" nzTitle="403" nzSubTitle="Sorry, you are not authorized to access this page.">
+      <div nz-result-extra>
+        <button nz-button nzType="primary">Back Home</button>
+      </div>
+    </nz-result>
+  `
+})
+export class NzDemoResultFotComponent {}

components/result/demo/info.md

@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh-CN: Info
+  en-US: Info
+---
+
+## zh-CN
+
+展示处理结果。
+
+## en-US
+
+Show processing results.

components/result/demo/info.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-result-info',
+  template: `
+    <nz-result nzStatus="info" nzTitle="Your operation has been executed">
+      <div nz-result-extra>
+        <button nz-button nzType="primary">Go Console</button>
+      </div>
+    </nz-result>
+  `
+})
+export class NzDemoResultInfoComponent {}

components/result/demo/module

@@ -0,0 +1,5 @@
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzResultModule } from 'ng-zorro-antd/result';
+
+export const moduleList = [ NzButtonModule, NzIconModule, NzResultModule ];

components/result/demo/success.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: Success
+  en-US: Success
+---
+
+## zh-CN
+
+成功的结果。
+
+## en-US
+
+Show successful results.

components/result/demo/success.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-result-success',
+  template: `
+    <nz-result
+      nzStatus="success"
+      nzTitle="Successfully Purchased Cloud Server ECS!"
+      nzSubTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
+    >
+      <div nz-result-extra>
+        <button nz-button nzType="primary">Go Console</button>
+        <button nz-button>Buy Again</button>
+      </div>
+    </nz-result>
+  `
+})
+export class NzDemoResultSuccessComponent {}

components/result/demo/warning.md

@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: Warning
+  en-US: Warning
+---
+
+## zh-CN
+
+警告类型的结果。
+
+## en-US
+
+Show warning.

components/result/demo/warning.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-result-warning',
+  template: `
+    <nz-result nzStatus="warning" nzTitle="There are some problems with your operation">
+      <div nz-result-extra>
+        <button nz-button nzType="primary">Go Console</button>
+      </div>
+    </nz-result>
+  `
+})
+export class NzDemoResultWarningComponent {}

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

@@ -0,0 +1,44 @@
+---
+category: Components
+type: Feedback
+title: Result
+cols: 1
+---
+
+Used to feed back the results of a series of operational tasks.
+
+## When To Use
+
+Use when important operations need to inform the user to process the results and the feedback is more complicated.
+
+## Import this Component Individually
+
+You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
+
+```ts
+import { NzResultModule } from 'ng-zorro-antd/result';
+```
+
+## API
+
+### nz-result
+
+| Property     | Description                             | Type                                                                              | Default  |
+| ------------ | --------------------------------------- | --------------------------------------------------------------------------------- | -------- |
+| `nzTitle`    | title                                   | `TemplateRef<void>` \| `string`                                                   | -        |
+| `nzSubTitle` | subTitle                                | `TemplateRef<void>` \| `string`                                                   | -        |
+| `nzStatus`   | result status, decides icons and colors | `'success' \| 'error' \| 'info' \| 'warning'\| '404' \| '403' \| '500'` \| 'info' | `'info'` |
+| `nzIcon`     | custom icon                             | `TemplateRef<void>` \| `string`                                                   | -        |
+| `nzExtra`    | operating area                          | `TemplateRef<void>` \| `string`                                                   | -        |
+
+### Counter Parts
+
+You can use these directives as children of nz-result.
+
+| Directive                                | Description                              |
+| ---------------------------------------- | ---------------------------------------- |
+| `i[nz-result-icon], div[nz-result-icon]` | custom icon                              |
+| `div[nz-result-title]`                   | title                                    |
+| `div[nz-result-subtitle]`                | subtitle                                 |
+| `div[nz-result-content]`                 | contents, for detailed explanations      |
+| `div[nz-result-extra]`                   | extra content, usually an operating area |

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

@@ -0,0 +1,45 @@
+---
+category: Components
+type: 反馈
+title: Result
+subtitle: 结果
+cols: 1
+---
+
+用于反馈一系列操作任务的处理结果。
+
+## 何时使用
+
+当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。
+
+## 单独引入此组件
+
+想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
+
+```ts
+import { NzResultModule } from 'ng-zorro-antd/result';
+```
+
+## API
+
+### nz-result
+
+| 属性         | 说明                       | 类型                                                                              | 默认值   |
+| ------------ | -------------------------- | --------------------------------------------------------------------------------- | -------- |
+| `nzTitle`    | 标题                       | `TemplateRef<void>` \| `string`                                                   | -        |
+| `nzSubTitle` | 副标题                     | `TemplateRef<void>` \| `string`                                                   | -        |
+| `nzStatus`   | 结果的状态，决定图标和颜色 | `'success' \| 'error' \| 'info' \| 'warning'\| '404' \| '403' \| '500'` \| 'info' | `'info'` |
+| `nzIcon`     | 自定义 icon                | `TemplateRef<void>` \| `string`                                                   | -        |
+| `nzExtra`    | 操作区域                   | `TemplateRef<void>` \| `string`                                                   | -        |
+
+### 子元素
+
+你可以在 nz-result 中加入如下指令，它们的优先级低于上面的参数。
+
+| 元素                                     | 说明                     |
+| ---------------------------------------- | ------------------------ |
+| `i[nz-result-icon], div[nz-result-icon]` | 在顶部展示的大图标       |
+| `div[nz-result-title]`                   | 标题                     |
+| `div[nz-result-subtitle]`                | 副标题                   |
+| `div[nz-result-content]`                 | 内容，可以展示详细的信息 |
+| `div[nz-result-extra]`                   | 操作区域                 |

components/result/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';