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

单独引入此组件

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

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

nz-alertcomponent

参数说明类型默认值
[nzBanner]是否用作顶部公告booleanfalse
[nzClosable]默认不显示关闭按钮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>-