Alert警告提示

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

何时使用

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

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

代码演示

基本

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-alert-basic',
  template: `
    <nz-alert nzType="success" nzMessage="Success Text"></nz-alert>
  `
})
export class NzDemoAlertBasicComponent {}

可关闭的警告提示

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

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');
  }
}

图标

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

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'。

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、info、warning、error。

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 {}

含有辅助性文字介绍

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

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 {}

自定义关闭

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

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-alertcomponent