Alert警告提示

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

何时使用#

  • 当某个页面需要向用户显示警告的信息时。
  • 非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。
import { NzAlertModule } from 'ng-zorro-antd/alert';

代码演示

Success Text

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

expand codeexpand code
      加载中
    
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
      加载中
    
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
      加载中
    

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

expand codeexpand code
      加载中
    
S
Success TipsDetailed description and advices about successful copywriting.

让信息类型更加醒目, 满足定制化需求。

expand codeexpand code
      加载中
    
Success Text
Info Text
Warning Text
Error Text

共有四种样式 successinfowarningerror

expand codeexpand code
      加载中
    
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
      加载中
    
Info Text

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

expand codeexpand code
      加载中
    
Success Text

Error Text

Error Description Error Description Error Description Error Description


Warning Text

Info Text

Info Description Info Description Info Description Info Description

可以在右上角自定义操作项。

expand codeexpand code
      加载中
    

API#

nz-alert#

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