bee-notification
2.0.5 • Public • Published 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">
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 |
- |
已支持的键盘操作
开发调试
$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-notification
$ cd bee-notification
$ npm install
$ npm run dev
/bee-notification/
//
Package Sidebar
Install
Weekly Downloads