Alert 警告提示

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

何时使用#

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

API#

参数 说明 类型 默认值
type 必选参数，指定警告提示的样式，有四种选择success、info、warn、error String 无
closable 可选参数，默认不显示关闭按钮 Boolean 无
closeText 可选参数，自定义关闭按钮 String 无
message 必选参数，警告提示内容 String 无
description 可选参数，警告提示的辅助性文字介绍 String 无
onClose 可选参数，关闭时触发的回调函数 Function 无

代码演示 

import { Alert } from 'antd';

ReactDOM.render(<Alert message="成功提示的文案" type="success" />
, document.getElementById('components-alert-demo-basic'));
基本

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

import { Alert } from 'antd';

ReactDOM.render(<div>
  <Alert message="成功提示的文案"
    description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
    type="success" />
  <Alert message="消息提示的文案"
    description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
    type="info" />
  <Alert
    message="警告提示的文案"
    description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
    type="warn" />
  <Alert
    message="错误提示的文案"
    description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
    type="error" />
</div>, document.getElementById('components-alert-demo-description'));
含有辅助性文字介绍

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

import { Alert } from 'antd';
const link = <a href="#">不再提醒</a>;

ReactDOM.render(
<Alert message="消息提示的文案" type="info" closeText={link} />
, document.getElementById('components-alert-demo-close-type'));
自定义关闭

可以自定义关闭，自定义的文字会替换原先的关闭 Icon。

import { Alert } from 'antd';

const onClose = function(e) {
  console.log(e, '我要被关闭啦！');
};

ReactDOM.render(<div>
  <Alert message="警告提示的文案"
    type="warn"
    closable
    onClose={onClose} />
  <Alert message="错误提示的文案"
    description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
    type="error"
    closable
    onClose={onClose} />
</div>, document.getElementById('components-alert-demo-closable'));
可关闭的警告提示

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

import { Alert } from 'antd';

ReactDOM.render(<div>
  <Alert message="成功提示的文案" type="success" />
  <Alert message="消息提示的文案" type="info" />
  <Alert message="警告提示的文案" type="warn" />
  <Alert message="错误提示的文案" type="error" />
</div>,
document.getElementById('components-alert-demo-style'));
四种样式

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