tinper-beebee-message
Browser Support
 |
 |
 |
 |
 |
|---|---|---|---|---|
| IE 9+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
react bee-message component for tinper-bee
全局展示操作反馈信息。
应用场景：
- 可提供成功、警告和错误等反馈信息。
- 当需要提醒但是不打断操作时，是一种不打断用户操作的轻量级提示方式。
使用方法
const info = function () {
Message.create({content: 'This is a Info message', color: 'info'});
};
class Demo extends Component {
render () {
return (
<Button
colors="info"
onClick={info}>
info
</Button>
)
}
}样式引入
- 可以使用link引入build目录下Message.css
<link rel="stylesheet" href="./node_modules/bee-message/build/Message.css">- 可以在js中import样式
import "./node_modules/bee-message/src/Message.scss"
//或是
import "./node_modules/bee-message/build/Message.css"API
函数api
//设置默认设置
Message.config({
top: 20, //顶上显示时距顶部的位置
bottom: 20, //左下右下显示时距底部的位置
defaultBottom: 20, //底部显示时距底部的位置
duration: 20, //显示持续时间
width: 500 //左下左上右下右上显示时的宽度
});
//销毁所有消息
Message.destroy();
//创建消息
Messsage.create({});
message函数参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| content | 内容 | string/number | - |
| duration | 显示时间 | number | 3 |
| color | 颜色 | dark / light / success / danger / warning / info / successlight / dangerlight / warninglight / infolight |
light |
| onClose | 关闭时的钩子函数 | function | - |
| position | 弹出框显示的位置 | top / bottom / topRight / topLeft / bottomRight / bottomLeft |
top |
| style | 样式 | object | {} |
| keyboard | esc触发关闭 | boolean | true |
| onEscapeKeyUp | 响应ESC键时的钩子函数 | function | - |
| showIcon | 是否显示icon | boolean | true |
已支持的键盘操作
| 按键 | 功能 |
|---|---|
| esc | 关闭message |
开发调试
$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-message
$ cd bee-message
$ npm install
$ npm run dev