NG-ZORROResult
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 { NzResultModule } from 'ng-zorro-antd/result';Examples
Successfully Purchased Cloud Server ECS!
Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.
Show successful results.
Loading...
Your operation has been executed
Show processing results.
Loading...
There are some problems with your operation
Show warning.
Loading...
403
Sorry, you are not authorized to access this page.
You are not authorized to access this page.
Loading...
404
Sorry, the page you visited does not exist.
The page you visited does not exist.
Loading...
500
Sorry, there is an error on server.
There is an error on server.
Loading...
Submission Failed
Please check and modify the following information before resubmitting.
The content you submitted has the following error:
Complex error feedback.
Loading...
Great, we have done all the operators!
Custom icon.
Loading...
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' |
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 |