可关闭的警告提示

含有辅助性文字介绍

自定义关闭

自定义图标

Alert
警告提示

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

使用

源码

components/alert

文档

何时使用#

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

代码演示#

Success Text

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

      加载中

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

可关闭的警告提示

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

      加载中

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.

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

      加载中

S

Success TipsDetailed description and advices about successful copywriting.

自定义图标

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

      加载中

Success Text

Info Text

Warning Text

Error Text

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

      加载中

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

含有辅助性文字介绍

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

      加载中

Info Text

自定义关闭

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

      加载中

Success Text

Error Text

Error Description Error Description Error Description Error Description

Warning Text

Info Text

Info Description Info Description Info Description Info Description

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

      加载中

将 nz-alert-marquee 作为 nzBanner 警告的 [nzMessage] 模板内容传入，可实现滚动走马灯公告效果。使用 nzPauseOnHover 属性可在鼠标悬停时暂停滚动，nzSpeed 属性用于控制滚动速度（单位：像素/秒，默认 50，值越大滚动越快）。

      加载中

API#

nz-alertcomponent#

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

nz-alert-marqueecomponent#

将 nz-alert-marquee 作为 [nzMessage] 的模板内容使用，可在警告提示中实现滚动走马灯效果。

参数	说明	类型	默认值
`[nzPauseOnHover]`	鼠标悬停时是否暂停滚动动画	`boolean`	`false`
`[nzSpeed]`	滚动速度（像素/秒），值越大滚动越快	`number`	`50`