bee-notification
Notification ui component for react
Last updated 4 months ago by tinper-bot .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install bee-notification 
SYNC missed versions from official npm registry.

bee-notification

npm version Build Status Coverage Status

Browser Support

IE Chrome Firefox Opera Safari
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

Current Tags

  • 2.0.3-alpha.0                                ...           alpha (a year ago)
  • 2.0.5                                ...           latest (4 months ago)
  • 1.1.4                                ...           next (2 years ago)

33 Versions

  • 2.0.5                                ...           4 months ago
  • 2.0.4                                ...           6 months ago
  • 2.0.3                                ...           a year ago
  • 2.0.3-alpha.0                                ...           a year ago
  • 2.0.2                                ...           a year ago
  • 2.0.2-alpha.0                                ...           a year ago
  • 2.0.1                                ...           a year ago
  • 2.0.0                                ...           2 years ago
  • 1.1.7                                ...           2 years ago
  • 1.1.6                                ...           2 years ago
  • 1.1.5                                ...           2 years ago
  • 1.1.4                                ...           2 years ago
  • 1.1.3                                ...           2 years ago
  • 1.1.2                                ...           2 years ago
  • 1.1.1                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
  • 0.3.1                                ...           3 years ago
  • 0.2.24                                ...           3 years ago
  • 0.2.23                                ...           4 years ago
  • 0.2.22                                ...           4 years ago
  • 0.2.1                                ...           4 years ago
  • 0.2.0                                ...           4 years ago
  • 0.0.6                                ...           4 years ago
  • 0.0.5                                ...           4 years ago
  • 0.0.4                                ...           4 years ago
  • 0.0.3                                ...           4 years ago
  • 0.0.2                                ...           4 years ago
  • 0.0.1                                ...           4 years ago

Copyright 2014 - 2016 © taobao.org |