bee-notification

Browser Support

IE 9+ ✔	Chrome 31.0+ ✔	Firefox 31.0+ ✔	Opera 30.0+ ✔	Safari 7.0+ ✔

react bee-notification component for tinper-bee

Notification通知不同于操作类型的信息反馈，是一种主动推送的信息。

使用方法

let notification = null;
Notification.newInstance({position: 'bottomRight'}, n => notification = n);
 
class Demo1 extends Component {
 
    simpleFn() {
      notification.notice({
        content: <span>simple show</span>,
        onClose() {
          console.log('simple close');
        },
      });
    }
    render () {
 
        return (
            <div className="demoPadding">
                <Button onClick={this.simpleFn}>simple show</Button>
            </div>
        )
    }
}
 

样式引入

• 可以使用link引入build目录下Notification.css

<link rel="stylesheet" href="./node_modules/bee-notification/build/Notification.css">

• 可以在js中import样式

import "./node_modules/bee-notification/src/Notification.scss"
//或是
import "./node_modules/bee-notification/build/Notification.css"

API

Notice

参数	说明	类型	默认值
duration	显示时间	number	4.5
onClose	关闭时触发的钩子函数	function	-
closable	是否可手动关闭	boolean	true
color	显示颜色	success/info/danger/warning/dark	-
className	类名	string	-
style	样式	object	-

Notification

参数	说明	类型	默认值
show	是否显示	boolean	true
transition	动画	element	Fade
position	显示位置	topRight/BottomRight	topRight
timeout	延迟时间	number	-
onEnter	开始显示时的钩子函数	function	-
onEntering	显示时的钩子函数	function	-
onEntered	显示完成后的钩子函数	function	-
onExit	隐藏开始时的钩子函数	function	-
onExiting	隐藏进行时的钩子函数	function	-
onExited	隐藏结束时的钩子函数	function	-
className	类名	string	-
style	样式	object	-
keyboard	esc触发关闭	boolean	true
onEscapeKeyUp	响应ESC键时的钩子函数	function	-

已支持的键盘操作

按键	功能
esc	关闭Notification

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-notification
$ cd bee-notification
$ npm install
$ npm run dev