Alert警告提示
警告提示,展现需要关注的信息。
何时使用#
当某个页面需要向用户显示警告的信息时。
非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。
代码演示
import { Alert } from 'antd';
ReactDOM.render(
<Alert message="Success Text" type="success" />
, mountNode);
import { Alert } from 'antd';
const onClose = function (e) {
console.log(e, 'I was closed.');
};
ReactDOM.render(
<div>
<Alert
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
type="warning"
closable
onClose={onClose}
/>
<Alert
message="Error Text"
description="Error Description Error Description Error Description Error Description Error Description Error Description"
type="error"
closable
onClose={onClose}
/>
</div>
, mountNode);
Detailed description and advices about successful copywriting.
Additional description and informations about copywriting.
This is a warning notice about copywriting.
This is an error message about copywriting.
import { Alert } from 'antd';
ReactDOM.render(
<div>
<Alert message="Success Tips" type="success" showIcon />
<Alert message="Informational Notes" type="info" showIcon />
<Alert message="Warning" type="warning" showIcon />
<Alert message="Error" type="error" showIcon />
<Alert
message="success tips"
description="Detailed description and advices about successful copywriting."
type="success"
showIcon
/>
<Alert
message="Informational Notes"
description="Additional description and informations about copywriting."
type="info"
showIcon
/>
<Alert
message="Warning"
description="This is a warning notice about copywriting."
type="warning"
showIcon
/>
<Alert
message="Error"
description="This is an error message about copywriting."
type="error"
showIcon
/>
</div>
, mountNode);
import { Alert } from 'antd';
ReactDOM.render(
<div>
<Alert message="Warning text" banner />
<br />
<Alert message="Very long warning text warning text text text text text text text" banner closable />
<br />
<Alert showIcon={false} message="Warning text without icon" banner />
<br />
<Alert type="error" message="Error text" banner />
</div>
, mountNode);
import { Alert } from 'antd';
ReactDOM.render(
<div>
<Alert message="Success Text" type="success" />
<Alert message="Info Text" type="info" />
<Alert message="Warning Text" type="warning" />
<Alert message="Error Text" type="error" />
</div>
, mountNode);
import { Alert } from 'antd';
ReactDOM.render(
<div>
<Alert
message="Success Text"
description="Success Description Success Description Success Description"
type="success"
/>
<Alert
message="Info Text"
description="Info Description Info Description Info Description Info Description"
type="info"
/>
<Alert
message="Warning Text"
description="Warning Description Warning Description Warning Description Warning Description"
type="warning"
/>
<Alert
message="Error Text"
description="Error Description Error Description Error Description Error Description"
type="error"
/>
</div>
, mountNode);
import { Alert } from 'antd';
ReactDOM.render(
<Alert message="Info Text" type="info" closeText="Close Now" />
, mountNode);
API#
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
banner | 是否用作顶部公告 | boolean | false |
closable | 默认不显示关闭按钮 | boolean | 无 |
closeText | 自定义关闭按钮 | string|ReactNode | 无 |
description | 警告提示的辅助性文字介绍 | string|ReactNode | 无 |
message | 警告提示内容 | string|ReactNode | 无 |
showIcon | 是否显示辅助图标 | boolean | false,banner 模式下默认值为 true |
type | 指定警告提示的样式,有四种选择 success 、info 、warning 、error | string | info ,banner 模式下默认值为 warning |
onClose | 关闭时触发的回调函数 | Function | 无 |