1 | # bee-message
|
2 |
|
3 | [![npm version](https://img.shields.io/npm/v/bee-message.svg)](https://www.npmjs.com/package/bee-message)
|
4 | [![Build Status](https://img.shields.io/travis/tinper-bee/bee-message/master.svg)](https://travis-ci.org/tinper-bee/bee-message)
|
5 | [![Coverage Status](https://coveralls.io/repos/github/tinper-bee/bee-message/badge.svg?branch=master)](https://coveralls.io/github/tinper-bee/bee-message?branch=master)
|
6 |
|
7 |
|
8 | ## Browser Support
|
9 |
|
10 | |![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png)|
|
11 | | --- | --- | --- | --- | --- |
|
12 | | IE 9+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
|
13 |
|
14 |
|
15 | react bee-message component for tinper-bee
|
16 |
|
17 | 全局展示操作反馈信息。
|
18 |
|
19 | 应用场景:
|
20 | - 可提供成功、警告和错误等反馈信息。
|
21 | - 当需要提醒但是不打断操作时,是一种不打断用户操作的轻量级提示方式。
|
22 |
|
23 | ## 使用方法
|
24 |
|
25 | ```
|
26 | const info = function () {
|
27 | Message.create({content: 'This is a Info message', color: 'info'});
|
28 | };
|
29 |
|
30 | class Demo extends Component {
|
31 | render () {
|
32 | return (
|
33 | <Button
|
34 | colors="info"
|
35 | onClick={info}>
|
36 | info
|
37 | </Button>
|
38 | )
|
39 | }
|
40 | }
|
41 | ```
|
42 |
|
43 | #### 样式引入
|
44 |
|
45 | - 可以使用link引入build目录下Message.css
|
46 |
|
47 | ```
|
48 | <link rel="stylesheet" href="./node_modules/bee-message/build/Message.css">
|
49 | ```
|
50 | - 可以在js中import样式
|
51 |
|
52 | ```
|
53 | import "./node_modules/bee-message/src/Message.scss"
|
54 | //或是
|
55 | import "./node_modules/bee-message/build/Message.css"
|
56 | ```
|
57 |
|
58 |
|
59 | ## API
|
60 |
|
61 | #### 函数api
|
62 |
|
63 | ```
|
64 | //设置默认设置
|
65 | Message.config({
|
66 | top: 20, //顶上显示时距顶部的位置
|
67 | bottom: 20, //左下右下显示时距底部的位置
|
68 | defaultBottom: 20, //底部显示时距底部的位置
|
69 | duration: 20, //显示持续时间
|
70 | width: 500 //左下左上右下右上显示时的宽度
|
71 | });
|
72 |
|
73 | //销毁所有消息
|
74 | Message.destroy();
|
75 |
|
76 | //创建消息
|
77 | Messsage.create({});
|
78 |
|
79 | ```
|
80 |
|
81 | #### message函数参数
|
82 |
|
83 | |参数|说明|类型|默认值|
|
84 | |:---|:-----|:----|:------|
|
85 | |content|内容|string/number|-|
|
86 | |duration|显示时间|number|3|
|
87 | |color|颜色|dark/light/success/danger/warning/info/successlight/dangerlight/warninglight/infolight|'dark'|
|
88 | |onClose|关闭时的钩子函数|function|-|
|
89 | |position|位置|top/bottom/topRight/topLeft/bottomRight/bottomLeft|top|
|
90 | |style|样式|object|{}|
|
91 | |keyboard|esc触发关闭|boolean|true|
|
92 | |onEscapeKeyUp|响应ESC键时的钩子函数|function|-|
|
93 | |showIcon|是否显示icon|boolean|false|
|
94 |
|
95 |
|
96 | #### 已支持的键盘操作
|
97 |
|
98 | |按键|功能|
|
99 | |:---|:----|
|
100 | |esc |关闭message|
|
101 |
|
102 |
|
103 | #### 开发调试
|
104 |
|
105 | ```sh
|
106 | $ npm install -g bee-tools
|
107 | $ git clone https://github.com/tinper-bee/bee-message
|
108 | $ cd bee-message
|
109 | $ npm install
|
110 | $ npm run dev
|
111 | ```
|