Alert 警告提示

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

何时使用#

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

API#

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

代码演示

import { Alert } from 'antd';

ReactDOM.render(<Alert message="成功提示的文案" type="success" />
, mountNode);

基本

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

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>, mountNode);

可关闭的警告提示

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

import { Alert } from 'antd';

ReactDOM.render(<div>
  <Alert message="成功提示的文案" type="success" showIcon />
  <Alert message="消息提示的文案" type="info" showIcon />
  <Alert message="警告提示的文案" type="warn" showIcon />
  <Alert message="错误提示的文案" type="error" showIcon />
  <Alert message="成功提示的文案"
    description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
    type="success"
    showIcon />
  <Alert message="消息提示的文案"
    description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
    type="info"
    showIcon />
  <Alert
    message="警告提示的文案"
    description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
    type="warn"
    showIcon />
  <Alert
    message="错误提示的文案"
    description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
    type="error"
    showIcon />
</div>, mountNode);

图标

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

import { Alert } from 'antd';

ReactDOM.render(<div>
  <Alert message="成功提示的文案" type="success" />
  <Alert message="消息提示的文案" type="info" />
  <Alert message="警告提示的文案" type="warn" />
  <Alert message="错误提示的文案" type="error" />
</div>,
mountNode);

四种样式

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

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>, mountNode);

含有辅助性文字介绍

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

import { Alert } from 'antd';

ReactDOM.render(
<Alert message="消息提示的文案" type="info" closeText="不再提醒" />
, mountNode);

自定义关闭

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