---
order: 0
title: Classic
---

典型结果页面。

```ts
import { Component } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';

@Component({
    selector: 'app-demo',
    template: `
<result
    type="success"
    [title]="'提交成功'"
    description="提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，使用 Message 全局提示反馈即可。本文字区域可以展示简单的补充说明，如果有类似展示x“单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。"
    [extra]="resultExtra">
    <ng-template #resultExtra>
        <div nz-row [nzGutter]="16" class="mb-md">
            <div nz-col [nzXs]="24" [nzSm]="12" [nzMd]="12" [nzLg]="12" [nzXl]="6">
                <span class="text-grey-darker">项目 ID：</span>
                23421
            </div>
            <div nz-col [nzXs]="24" [nzSm]="12" [nzMd]="12" [nzLg]="12" [nzXl]="6">
                <span class="text-grey-darker">负责人：</span>
                曲丽丽
            </div>
            <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12">
                <span class="text-grey-darker">生效时间：</span>
                2016-12-12 ~ 2017-12-12
            </div>
        </div>
        <nz-steps [nzCurrent]="1" nzProgressDot>
            <nz-step [nzTitle]="'创建项目'" [nzDescription]="createDesc">
                <ng-template #createDesc>
                    <div style="font-size: 14px; position: relative; left: 38px;">
                        <div style="margin-top: 8px; margin-bottom: 4px;">
                            曲丽丽<i class="anticon anticon-dingding-o ml-sm"></i>
                        </div>
                        <div style="margin-top: 8px; margin-bottom: 4px;">2016-12-12 12:32</div>
                    </div>
                </ng-template>
            </nz-step>
            <nz-step [nzTitle]="'部门初审'" [nzDescription]="checkedDesc">
                <ng-template #checkedDesc>
                    <div style="font-size: 14px; position: relative; left: 38px;">
                        <div style="margin-top: 8px; margin-bottom: 4px;">
                            周毛毛<i class="anticon anticon-dingding-o ml-sm" style="color: #00a0e9;"></i>
                        </div>
                        <div style="margin-top: 8px; margin-bottom: 4px;">
                            <a (click)="msg.success('click')">催一下</a>
                        </div>
                    </div>
                </ng-template>
            </nz-step>
            <nz-step [nzTitle]="'财务复核'"></nz-step>
            <nz-step [nzTitle]="'完成'"></nz-step>
        </nz-steps>
    </ng-template>
    <button nz-button [nzType]="'primary'">返回列表</button>
    <button nz-button>查看项目</button>
    <button nz-button>打 印</button>
</result>
    `
})
export class DemoComponent {
    constructor(public msg: NzMessageService) {}
}
```