Alert 警告提示

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

何时使用#

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

API#

参数 说明 类型 默认值
type 必选参数,指定警告提示的样式,有四种选择successinfowarnerror String
closable 可选参数,默认不显示关闭按钮 Boolean
closeText 可选参数,自定义关闭按钮 String
message 必选参数,警告提示内容 String
description 可选参数,警告提示的辅助性文字介绍 String
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);

共有四种样式successinfowarnerror

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