Result结果

用于反馈一系列操作任务的处理结果。

何时使用

当有重要操作需告知用户处理结果,且反馈内容较为复杂时使用。

  1. import { NzResultModule } from 'ng-zorro-antd/result';

代码演示Result结果 - 图2

Result结果 - 图3

Success

成功的结果。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-result-success',
  4. template: `
  5. <nz-result
  6. nzStatus="success"
  7. nzTitle="Successfully Purchased Cloud Server ECS!"
  8. nzSubTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
  9. >
  10. <div nz-result-extra>
  11. <button nz-button nzType="primary">Go Console</button>
  12. <button nz-button>Buy Again</button>
  13. </div>
  14. </nz-result>
  15. `
  16. })
  17. export class NzDemoResultSuccessComponent {}

Result结果 - 图4

Info

展示处理结果。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-result-info',
  4. template: `
  5. <nz-result nzStatus="info" nzTitle="Your operation has been executed">
  6. <div nz-result-extra>
  7. <button nz-button nzType="primary">Go Console</button>
  8. </div>
  9. </nz-result>
  10. `
  11. })
  12. export class NzDemoResultInfoComponent {}

Result结果 - 图5

Warning

警告类型的结果。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-result-warning',
  4. template: `
  5. <nz-result nzStatus="warning" nzTitle="There are some problems with your operation">
  6. <div nz-result-extra>
  7. <button nz-button nzType="primary">Go Console</button>
  8. </div>
  9. </nz-result>
  10. `
  11. })
  12. export class NzDemoResultWarningComponent {}

Result结果 - 图6

403

你没有此页面的访问权限。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-result-fot',
  4. template: `
  5. <nz-result nzStatus="403" nzTitle="403" nzSubTitle="Sorry, you are not authorized to access this page.">
  6. <div nz-result-extra>
  7. <button nz-button nzType="primary">Back Home</button>
  8. </div>
  9. </nz-result>
  10. `
  11. })
  12. export class NzDemoResultFotComponent {}

Result结果 - 图7

404

此页面未找到。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-result-fof',
  4. template: `
  5. <nz-result nzStatus="404" nzTitle="404" nzSubTitle="Sorry, the page you visited does not exist.">
  6. <div nz-result-extra>
  7. <button nz-button nzType="primary">Back Home</button>
  8. </div>
  9. </nz-result>
  10. `
  11. })
  12. export class NzDemoResultFofComponent {}

Result结果 - 图8

500

服务器发生了错误。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-result-foo',
  4. template: `
  5. <nz-result nzStatus="500" nzTitle="500" nzSubTitle="Sorry, there is an error on server.">
  6. <div nz-result-extra>
  7. <button nz-button nzType="primary">Back Home</button>
  8. </div>
  9. </nz-result>
  10. `
  11. })
  12. export class NzDemoResultFooComponent {}

Result结果 - 图9

Error

复杂的错误反馈。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-result-error',
  4. template: `
  5. <nz-result
  6. nzTitle="Submission Failed"
  7. nzStatus="error"
  8. nzSubTitle="Please check and modify the following information before resubmitting."
  9. >
  10. <div nz-result-content>
  11. <div class="desc">
  12. <h4 nz-title>The content you submitted has the following error:</h4>
  13. <p nz-paragraph>
  14. <i nz-icon nzType="close-circle"></i>
  15. Your account has been frozen <a>Thaw immediately &gt;</a>
  16. </p>
  17. <p nz-paragraph>
  18. <i nz-icon nzType="close-circle"></i>
  19. Your account is not yet eligible to apply <a>Apply immediately &gt;</a>
  20. </p>
  21. </div>
  22. </div>
  23. <div nz-result-extra>
  24. <button nz-button nzType="primary">Go Console</button>
  25. <button nz-button>Buy Again</button>
  26. </div>
  27. </nz-result>
  28. `
  29. })
  30. export class NzDemoResultErrorComponent {}

Result结果 - 图10

自定义 icon

自定义 icon。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-result-custom',
  4. template: `
  5. <nz-result [nzIcon]="'smile-twotone'" [nzTitle]="'Great, we have done all the operators!'">
  6. <div nz-result-extra>
  7. <button nz-button nzType="primary">Next</button>
  8. </div>
  9. </nz-result>
  10. `
  11. })
  12. export class NzDemoResultCustomComponent {}

API

nz-resultcomponent

属性说明类型默认值
nzTitle标题TemplateRef<void> | string-
nzSubTitle副标题TemplateRef<void> | string-
nzStatus结果的状态,决定图标和颜色‘success’ | ‘error’ | ‘info’ | ‘warning’| ‘404’ | ‘403’ | ‘500’ | ‘info’‘info’
nzIcon自定义 iconTemplateRef<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]操作区域