Notification 通知提醒框

如果项目中使用的是 1.x 版本的基础组件(@alifd/next),请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/notification@0.2.2 -S

全局展示通知提醒信息。

组件实现参照 antd 的 Notification 组件,并针对 ICE 做了适配

安装和升级

  1. def add @icedesign/notification

API

  • notification.success(config)

  • notification.error(config)

  • notification.info(config)

  • notification.warning(config)

  • notification.close(key: String)

  • notification.destroy()

config 参数如下:

参数说明类型默认值
message通知提醒标题,必选string|ReactNode-
description通知提醒内容,必选string|ReactNode-
btn自定义关闭按钮ReactNode-
icon自定义图标ReactNode-
key当前通知唯一标志string-
onClose点击默认关闭按钮时触发的回调函数Function-
duration默认 4.5 秒后自动关闭,配置为 null 则不自动关闭number4.5
placement弹出位置,可选 topLeft topRight bottomLeft``bottomRight | string | topRight
getContainer配置渲染节点的输出位置() => HTMLNode() => document.body

还提供了一个全局配置方法,在调用前提前配置,全局一次生效。

  • notification.config(options)
  1. IceNotification.config({
  2. placement: 'bottomRight',
  3. bottom: 50,
  4. duration: 3,
  5. });
参数说明类型默认值
placement弹出位置,可选 topLeft topRight bottomLeft``bottomRight | string | topRight
top消息从顶部弹出时,距离顶部的位置,单位像素。number24
bottom消息从底部弹出时,距离底部的位置,单位像素。number24
duration默认自动关闭延时,单位秒number4.5

感谢 Antd 团队

代码示例

简单的用法

本 Demo 演示最基础的用法。

Notification 通知提醒框 - 图1

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import IceNotification from '@icedesign/notification';
  4. import { Button, Icon, Select } from '@icedesign/base';
  5. class App extends Component {
  6. state = {};
  7. basic = () => {
  8. IceNotification.open({
  9. message: '蒹葭苍苍,白露为霜',
  10. description:
  11. '所謂伊人,在水一方。 溯洄從之,道阻且長。 溯游從之,宛在水中央。 蒹葭萋萋,白露未晞。 所謂伊人,在水之湄。 溯洄從之,道...',
  12. });
  13. };
  14. duration = () => {
  15. const args = {
  16. message: '蒹葭苍苍,白露为霜',
  17. description: '不会自动关闭,除非手动点击关闭按钮!',
  18. duration: 0,
  19. };
  20. IceNotification.open(args);
  21. };
  22. icon = () => {
  23. IceNotification.open({
  24. message: '蒹葭苍苍,白露为霜',
  25. description:
  26. 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  27. icon: <Icon type="credit-level-filling" />,
  28. });
  29. };
  30. placement = () => {
  31. IceNotification.open({
  32. message: 'Notification Title',
  33. description:
  34. 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  35. });
  36. };
  37. btn = () => {
  38. const close = () => {
  39. console.log(
  40. 'Notification was closed. Either the close button was clicked or duration time elapsed.'
  41. );
  42. };
  43. const key = `open${Date.now()}`;
  44. const btnClick = function() {
  45. // to hide notification box
  46. IceNotification.close(key);
  47. };
  48. const btn = (
  49. <Button type="primary" size="small" onClick={btnClick}>
  50. Confirm
  51. </Button>
  52. );
  53. IceNotification.open({
  54. message: 'Notification Title',
  55. description:
  56. 'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
  57. btn,
  58. key,
  59. onClose: close,
  60. });
  61. };
  62. openNotificationWithIcon = (type) => {
  63. IceNotification[type]({
  64. message: 'Notification Title',
  65. description:
  66. 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  67. });
  68. };
  69. render() {
  70. return (
  71. <div>
  72. <p>
  73. 最简单的用法,4.5 秒后自动关闭。
  74. <Button type="primary" onClick={this.basic}>
  75. ClickMe
  76. </Button>
  77. </p>
  78. <p>
  79. 自定义通知框自动关闭的延时,默认`4.5s`,取消自动关闭只要将该值设为 `0`
  80. 即可。。
  81. <Button type="primary" onClick={this.duration}>
  82. ClickMe
  83. </Button>
  84. </p>
  85. <p>
  86. 图标可以被自定义。
  87. <Button type="primary" onClick={this.icon}>
  88. ClickMe
  89. </Button>
  90. </p>
  91. <p>
  92. 可以设置通知从右上角、右下角、左下角、左上角弹出。
  93. <Select
  94. defaultValue="topRight"
  95. style={{ width: 120, marginRight: 10 }}
  96. onChange={(val) => {
  97. IceNotification.config({ placement: val });
  98. }}
  99. >
  100. {['topLeft', 'topRight', 'bottomLeft', 'bottomRight'].map((val) => (
  101. <Option key={val} value={val}>
  102. {val}
  103. </Option>
  104. ))}
  105. </Select>
  106. <Button type="primary" onClick={this.placement}>
  107. ClickMe
  108. </Button>
  109. </p>
  110. <p>
  111. 自定义关闭按钮的样式和文字。
  112. <Button type="primary" onClick={this.btn}>
  113. ClickMe
  114. </Button>
  115. </p>
  116. <p>
  117. 通知提醒框左侧有图标。
  118. <Button onClick={() => this.openNotificationWithIcon('success')}>
  119. Success
  120. </Button>
  121. <Button onClick={() => this.openNotificationWithIcon('info')}>
  122. Info
  123. </Button>
  124. <Button onClick={() => this.openNotificationWithIcon('warning')}>
  125. Warning
  126. </Button>
  127. <Button onClick={() => this.openNotificationWithIcon('error')}>
  128. Error
  129. </Button>
  130. </p>
  131. </div>
  132. );
  133. }
  134. }
  135. ReactDOM.render(<App />, mountNode);

相关区块

Notification 通知提醒框 - 图2

暂无相关区块