Alert警告提示

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

何时使用#

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

单独引入此组件#

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

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

代码演示

Success Text

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-alert-basic',
  template: `
    <nz-alert nzType="success" nzMessage="Success Text"></nz-alert>
  `
})
export class NzDemoAlertBasicComponent {}
Warning Text Warning Text Warning Text Warning Text Warning Text Warning Text Warning Text
Error TextError Description Error Description Error Description Error Description Error Description Error Description

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-alert-closable',
  template: `
    <nz-alert
      nzType="warning"
      nzCloseable
      nzMessage="Warning Text Warning Text Warning Text Warning Text Warning Text Warning Text Warning Text"
      (nzOnClose)="afterClose()"
    >
    </nz-alert>
    <nz-alert
      nzType="error"
      nzCloseable
      nzMessage="Error Text"
      nzDescription="Error Description Error Description Error Description Error Description Error Description Error Description"
      (nzOnClose)="afterClose()"
    >
    </nz-alert>
  `,
  styles: [
    `
      nz-alert {
        margin-bottom: 16px;
      }
    `
  ]
})
export class NzDemoAlertClosableComponent {
  afterClose(): void {
    console.log('close');
  }
}
Success Tips
Informational Notes
Warning
Error
Success TipsDetailed description and advices about successful copywriting.
Informational NotesAdditional description and informations about copywriting.
WarningThis is a warning notice about copywriting.
ErrorThis is an error message about copywriting.

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-alert-icon',
  template: `
    <nz-alert nzType="success" nzMessage="Success Tips" nzShowIcon></nz-alert>
    <nz-alert nzType="info" nzMessage="Informational Notes" nzShowIcon></nz-alert>
    <nz-alert nzType="warning" nzMessage="Warning" nzShowIcon></nz-alert>
    <nz-alert nzType="error" nzMessage="Error" nzShowIcon></nz-alert>
    <nz-alert
      nzType="success"
      nzMessage="Success Tips"
      nzDescription="Detailed description and advices about successful copywriting."
      nzShowIcon
    >
    </nz-alert>
    <nz-alert
      nzType="info"
      nzMessage="Informational Notes"
      nzDescription="Additional description and informations about copywriting."
      nzShowIcon
    >
    </nz-alert>
    <nz-alert
      nzType="warning"
      nzMessage="Warning"
      nzDescription="This is a warning notice about copywriting."
      nzShowIcon
    >
    </nz-alert>
    <nz-alert nzType="error" nzMessage="Error" nzDescription="This is an error message about copywriting." nzShowIcon>
    </nz-alert>
  `,
  styles: [
    `
      nz-alert {
        margin-bottom: 16px;
      }
    `
  ]
})
export class NzDemoAlertIconComponent {}

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-alert-banner',
  template: `
    <nz-alert nzBanner nzMessage="Warning text"></nz-alert>
    <nz-alert
      nzBanner
      nzMessage="Very long warning text warning text text text text text text text"
      nzCloseable
    ></nz-alert>
    <nz-alert nzBanner nzMessage="Warning text without icon" [nzShowIcon]="false"></nz-alert>
    <nz-alert nzBanner nzType="error" nzMessage="Error text"></nz-alert>
  `,
  styles: [
    `
      nz-alert {
        margin-bottom: 12px;
      }
    `
  ]
})
export class NzDemoAlertBannerComponent {}
Success Text
Info Text
Warning Text
Error Text

共有四种样式 successinfowarningerror

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-alert-style',
  template: `
    <nz-alert nzType="success" nzMessage="Success Text"></nz-alert>
    <nz-alert nzType="info" nzMessage="Info Text"></nz-alert>
    <nz-alert nzType="warning" nzMessage="Warning Text"></nz-alert>
    <nz-alert nzType="error" nzMessage="Error Text"></nz-alert>
  `,
  styles: [
    `
      nz-alert {
        margin-bottom: 16px;
      }
    `
  ]
})
export class NzDemoAlertStyleComponent {}
Success TextSuccess Description Success Description Success Description
Info TextInfo Description Info Description Info Description Info Description
Warning TextWarning Description Warning Description Warning Description Warning Description
Error TextError Description Error Description Error Description Error Description

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-alert-description',
  template: `
    <nz-alert
      nzType="success"
      nzMessage="Success Text"
      nzDescription="Success Description Success Description Success Description"
    >
    </nz-alert>
    <nz-alert
      nzType="info"
      nzMessage="Info Text"
      nzDescription="Info Description Info Description Info Description Info Description"
    >
    </nz-alert>
    <nz-alert
      nzType="warning"
      nzMessage="Warning Text"
      nzDescription="Warning Description Warning Description Warning Description Warning Description"
    >
    </nz-alert>
    <nz-alert
      nzType="error"
      nzMessage="Error Text"
      nzDescription="Error Description Error Description Error Description Error Description"
    >
    </nz-alert>
  `,
  styles: [
    `
      nz-alert {
        margin-bottom: 16px;
      }
    `
  ]
})
export class NzDemoAlertDescriptionComponent {}
Info TextClose Now

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-alert-close-text',
  template: `
    <nz-alert nzType="info" nzMessage="Info Text" nzCloseText="Close Now"></nz-alert>
  `
})
export class NzDemoAlertCloseTextComponent {}

API#

nz-alert#

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