Alert警告提示

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

何时使用

  • 当某个页面需要向用户显示警告的信息时。

  • 非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。

代码演示

Alert 警告提示 - 图1

基本

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

  1. import { Alert } from 'antd';
  2. ReactDOM.render(<Alert message="Success Text" type="success" />, mountNode);

Alert 警告提示 - 图2

可关闭的警告提示

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

  1. import { Alert } from 'antd';
  2. const onClose = e => {
  3. console.log(e, 'I was closed.');
  4. };
  5. ReactDOM.render(
  6. <div>
  7. <Alert
  8. message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
  9. type="warning"
  10. closable
  11. onClose={onClose}
  12. />
  13. <Alert
  14. message="Error Text"
  15. description="Error Description Error Description Error Description Error Description Error Description Error Description"
  16. type="error"
  17. closable
  18. onClose={onClose}
  19. />
  20. </div>,
  21. mountNode,
  22. );

Alert 警告提示 - 图3

图标

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

  1. import { Alert } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Alert message="Success Tips" type="success" showIcon />
  5. <Alert message="Informational Notes" type="info" showIcon />
  6. <Alert message="Warning" type="warning" showIcon />
  7. <Alert message="Error" type="error" showIcon />
  8. <Alert
  9. message="Success Tips"
  10. description="Detailed description and advice about successful copywriting."
  11. type="success"
  12. showIcon
  13. />
  14. <Alert
  15. message="Informational Notes"
  16. description="Additional description and information about copywriting."
  17. type="info"
  18. showIcon
  19. />
  20. <Alert
  21. message="Warning"
  22. description="This is a warning notice about copywriting."
  23. type="warning"
  24. showIcon
  25. />
  26. <Alert
  27. message="Error"
  28. description="This is an error message about copywriting."
  29. type="error"
  30. showIcon
  31. />
  32. </div>,
  33. mountNode,
  34. );

Alert 警告提示 - 图4

顶部公告

页面顶部通告形式,默认有图标且type 为 'warning'。

  1. import { Alert } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Alert message="Warning text" banner />
  5. <br />
  6. <Alert
  7. message="Very long warning text warning text text text text text text text"
  8. banner
  9. closable
  10. />
  11. <br />
  12. <Alert showIcon={false} message="Warning text without icon" banner />
  13. <br />
  14. <Alert type="error" message="Error text" banner />
  15. </div>,
  16. mountNode,
  17. );

Alert 警告提示 - 图5

四种样式

共有四种样式 successinfowarningerror

  1. import { Alert } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Alert message="Success Text" type="success" />
  5. <Alert message="Info Text" type="info" />
  6. <Alert message="Warning Text" type="warning" />
  7. <Alert message="Error Text" type="error" />
  8. </div>,
  9. mountNode,
  10. );

Alert 警告提示 - 图6

含有辅助性文字介绍

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

  1. import { Alert } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Alert
  5. message="Success Text"
  6. description="Success Description Success Description Success Description"
  7. type="success"
  8. />
  9. <Alert
  10. message="Info Text"
  11. description="Info Description Info Description Info Description Info Description"
  12. type="info"
  13. />
  14. <Alert
  15. message="Warning Text"
  16. description="Warning Description Warning Description Warning Description Warning Description"
  17. type="warning"
  18. />
  19. <Alert
  20. message="Error Text"
  21. description="Error Description Error Description Error Description Error Description"
  22. type="error"
  23. />
  24. </div>,
  25. mountNode,
  26. );

Alert 警告提示 - 图7

自定义关闭

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

  1. import { Alert } from 'antd';
  2. ReactDOM.render(<Alert message="Info Text" type="info" closeText="Close Now" />, mountNode);

Alert 警告提示 - 图8

平滑地卸载

平滑、自然的卸载提示。

  1. import { Alert } from 'antd';
  2. class App extends React.Component {
  3. state = {
  4. visible: true,
  5. };
  6. handleClose = () => {
  7. this.setState({ visible: false });
  8. };
  9. render() {
  10. return (
  11. <div>
  12. {this.state.visible ? (
  13. <Alert
  14. message="Alert Message Text"
  15. type="success"
  16. closable
  17. afterClose={this.handleClose}
  18. />
  19. ) : null}
  20. <p>placeholder text here</p>
  21. </div>
  22. );
  23. }
  24. }
  25. ReactDOM.render(<App />, mountNode);

API

参数说明类型默认值
afterClose关闭动画结束后触发的回调函数() => void-
banner是否用作顶部公告booleanfalse
closable默认不显示关闭按钮boolean
closeText自定义关闭按钮string|ReactNode
description警告提示的辅助性文字介绍string|ReactNode
icon自定义图标,showIcontrue 时有效ReactNode-
message警告提示内容string|ReactNode
showIcon是否显示辅助图标booleanfalse,banner 模式下默认值为 true
type指定警告提示的样式,有四种选择 successinfowarningerrorstringinfobanner 模式下默认值为 warning
onClose关闭时触发的回调函数(e: MouseEvent) => void