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