组件

Alert 警告提示

页面中展示重要的提示信息 API文档 组件问题反馈和讨论

使用方法 #

  • 支持手动关闭,静态浮层不会自动消失。

基础样式 #

基本使用方法,有四种样式可以选择 nv-alert-info 消息提醒 、 nv-alert-success 成功状态、 nv-alert-error 错误状态、 nv-alert-warning 信息警告,适用于简短的信息
<code>
Info Text
Success Text
Error Text
Warning Text
显示代码

含有描述信息 #

含有辅助性文字介绍的警告提示,需添加 nv-alert-with-description
<code>
Info Info Description Info Description Info Description Info Description
Success Info Description Info Description Info Description Info Description
Error Info Description Info Description Info Description Info Description
Warning Info Description Info Description Info Description Info Description
显示代码

可关闭的提示 #

显示关闭按钮,点击可关闭警告提示;添加关闭标签,并给标签添加相应class nv-alert-close
<code>
Info Description Info Description Info Description Info Description
Error Error Description Error Description Error Description Error Description
显示代码

带图标的提示 #

图标可以让提示更醒目,则添加 nv-alert-with-icon
<code>
Info Text
Success Text
Error Text
Warning Text
Info Info Description Info Description Info Description Info Description
Success Success Description Success Description Success Description Success Description
Error Error Description Error Description Error Description Error Description
Warning Warning Description Warning Description Warning Description Warning Description
显示代码

自定义关闭按钮 #

自定义关闭按钮为文字或其他符号
<code>
close Info Text
close Success Text
close Error Text
close Warning Text
close Info Info Description Info Description Info Description Info Description
close Success Success Description Success Description Success Description Success Description
close Error Error Description Error Description Error Description Error Description
close Warning Warning Description Warning Description Warning Description Warning Description
显示代码