• Alert警告提示
    • 何时使用
    • 单独引入此组件
    • 代码演示
    • API
      • nz-alertcomponent

    Alert警告提示

    警告提示，展现需要关注的信息。

    何时使用

    • 当某个页面需要向用户显示警告的信息时。
    • 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

    单独引入此组件

    想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

    1. import { NzAlertModule } from 'ng-zorro-antd/alert';

    代码演示

    Alert警告提示 - 图1

    基本

    最简单的用法，适用于简短的警告提示。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-alert-basic',
    5.   template: `
    6.     <nz-alert nzType="success" nzMessage="Success Text"></nz-alert>
    7.   `
    8. })
    9. export class NzDemoAlertBasicComponent {}

    Alert警告提示 - 图2

    可关闭的警告提示

    显示关闭按钮，点击可关闭警告提示。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-alert-closable',
    5.   template: `
    6.     <nz-alert
    7.       nzType="warning"
    8.       nzCloseable
    9.       nzMessage="Warning Text Warning Text Warning Text Warning Text Warning Text Warning Text Warning Text"
    10.       (nzOnClose)="afterClose()"
    11.     >
    12.     </nz-alert>
    13.     <nz-alert
    14.       nzType="error"
    15.       nzCloseable
    16.       nzMessage="Error Text"
    17.       nzDescription="Error Description Error Description Error Description Error Description Error Description Error Description"
    18.       (nzOnClose)="afterClose()"
    19.     >
    20.     </nz-alert>
    21.   `,
    22.   styles: [
    23.     `
    24.       nz-alert {
    25.         margin-bottom: 16px;
    26.       }
    27.     `
    28.   ]
    29. })
    30. export class NzDemoAlertClosableComponent {
    31.   afterClose(): void {
    32.     console.log('close');
    33.   }
    34. }

    Alert警告提示 - 图3

    图标

    可口的图标让信息类型更加醒目。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-alert-icon',
    5.   template: `
    6.     <nz-alert nzType="success" nzMessage="Success Tips" nzShowIcon></nz-alert>
    7.     <nz-alert nzType="info" nzMessage="Informational Notes" nzShowIcon></nz-alert>
    8.     <nz-alert nzType="warning" nzMessage="Warning" nzShowIcon></nz-alert>
    9.     <nz-alert nzType="error" nzMessage="Error" nzShowIcon></nz-alert>
    10.     <nz-alert
    11.       nzType="success"
    12.       nzMessage="Success Tips"
    13.       nzDescription="Detailed description and advices about successful copywriting."
    14.       nzShowIcon
    15.     >
    16.     </nz-alert>
    17.     <nz-alert
    18.       nzType="info"
    19.       nzMessage="Informational Notes"
    20.       nzDescription="Additional description and informations about copywriting."
    21.       nzShowIcon
    22.     >
    23.     </nz-alert>
    24.     <nz-alert
    25.       nzType="warning"
    26.       nzMessage="Warning"
    27.       nzDescription="This is a warning notice about copywriting."
    28.       nzShowIcon
    29.     >
    30.     </nz-alert>
    31.     <nz-alert nzType="error" nzMessage="Error" nzDescription="This is an error message about copywriting." nzShowIcon>
    32.     </nz-alert>
    33.   `,
    34.   styles: [
    35.     `
    36.       nz-alert {
    37.         margin-bottom: 16px;
    38.       }
    39.     `
    40.   ]
    41. })
    42. export class NzDemoAlertIconComponent {}

    Alert警告提示 - 图4

    顶部公告

    页面顶部通告形式，默认有图标且nzType 为 'warning'。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-alert-banner',
    5.   template: `
    6.     <nz-alert nzBanner nzMessage="Warning text"></nz-alert>
    7.     <nz-alert
    8.       nzBanner
    9.       nzMessage="Very long warning text warning text text text text text text text"
    10.       nzCloseable
    11.     ></nz-alert>
    12.     <nz-alert nzBanner nzMessage="Warning text without icon" [nzShowIcon]="false"></nz-alert>
    13.     <nz-alert nzBanner nzType="error" nzMessage="Error text"></nz-alert>
    14.   `,
    15.   styles: [
    16.     `
    17.       nz-alert {
    18.         margin-bottom: 12px;
    19.       }
    20.     `
    21.   ]
    22. })
    23. export class NzDemoAlertBannerComponent {}

    Alert警告提示 - 图5

    四种样式

    共有四种样式 success、info、warning、error。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-alert-style',
    5.   template: `
    6.     <nz-alert nzType="success" nzMessage="Success Text"></nz-alert>
    7.     <nz-alert nzType="info" nzMessage="Info Text"></nz-alert>
    8.     <nz-alert nzType="warning" nzMessage="Warning Text"></nz-alert>
    9.     <nz-alert nzType="error" nzMessage="Error Text"></nz-alert>
    10.   `,
    11.   styles: [
    12.     `
    13.       nz-alert {
    14.         margin-bottom: 16px;
    15.       }
    16.     `
    17.   ]
    18. })
    19. export class NzDemoAlertStyleComponent {}

    Alert警告提示 - 图6

    含有辅助性文字介绍

    含有辅助性文字介绍的警告提示。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-alert-description',
    5.   template: `
    6.     <nz-alert
    7.       nzType="success"
    8.       nzMessage="Success Text"
    9.       nzDescription="Success Description Success Description Success Description"
    10.     >
    11.     </nz-alert>
    12.     <nz-alert
    13.       nzType="info"
    14.       nzMessage="Info Text"
    15.       nzDescription="Info Description Info Description Info Description Info Description"
    16.     >
    17.     </nz-alert>
    18.     <nz-alert
    19.       nzType="warning"
    20.       nzMessage="Warning Text"
    21.       nzDescription="Warning Description Warning Description Warning Description Warning Description"
    22.     >
    23.     </nz-alert>
    24.     <nz-alert
    25.       nzType="error"
    26.       nzMessage="Error Text"
    27.       nzDescription="Error Description Error Description Error Description Error Description"
    28.     >
    29.     </nz-alert>
    30.   `,
    31.   styles: [
    32.     `
    33.       nz-alert {
    34.         margin-bottom: 16px;
    35.       }
    36.     `
    37.   ]
    38. })
    39. export class NzDemoAlertDescriptionComponent {}

    Alert警告提示 - 图7

    自定义关闭

    可以自定义关闭，自定义的内容会替换原先的关闭按钮。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-alert-close-text',
    5.   template: `
    6.     <nz-alert nzType="info" nzMessage="Info Text" nzCloseText="Close Now"></nz-alert>
    7.   `
    8. })
    9. export class NzDemoAlertCloseTextComponent {}

    API

    nz-alertcomponent

    参数说明类型默认值
    [nzBanner]是否用作顶部公告booleanfalse
    [nzCloseable]默认不显示关闭按钮boolean-
    [nzCloseText]自定义关闭按钮string | TemplateRef<void>-
    [nzDescription]警告提示的辅助性文字介绍string | TemplateRef<void>-
    [nzMessage]警告提示内容string | TemplateRef<void>-
    [nzShowIcon]是否显示辅助图标，nzBanner 模式下默认值为 truebooleanfalse
    [nzIconType]自定义图标类型，nzShowIcon 为 true 时有效string | string[] | Set<string> | { [klass: string]: any; }-
    [nzType]指定警告提示的样式，nzBanner 模式下默认值为 'warning''success' | 'info' | 'warning' | 'error''info'
    (nzOnClose)关闭时触发的回调函数EventEmitter<void>-