UNPKG

bee-loading/README.md

Version:

3.02 kBMarkdownView Raw

1# bee-loading
2
3[![npm version](https://img.shields.io/npm/v/bee-loading.svg)](https://www.npmjs.com/package/bee-loading)
4[![Build Status](https://img.shields.io/travis/tinper-bee/bee-loading/master.svg)](https://travis-ci.org/tinper-bee/bee-loading)
5[![Coverage Status](https://coveralls.io/repos/github/tinper-bee/bee-loading/badge.svg?branch=master)](https://coveralls.io/github/tinper-bee/bee-loading?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 11+ ✔ | Chrome 31.0+ ✔ |
13
14
15react bee-loading component for tinper-bee
16
17some description...
18
19## 使用方法
20
21### 使用单独的loading包
22#### 组件引入
23先进行下载bee-loading包
24
25```
26npm install --save bee-loading
27```
28组件调用
29
30```js
31import Loading from 'bee-loading';
32
33Loading.create({loadingType:"line",content: 'loading'});
34
35```
36
37#### 样式引入
38- 可以使用link引入build目录下button.css
39```
40<link rel="stylesheet" href="./node_modules/bee-loading/build/Loading.css">
41```
42- 可以在js中import样式
43```js
44import "./node_modules/bee-loading/src/Loading.scss"
45//或是
46import "./node_modules/bee-loading/build/Loding.css"
47```
48
49#### loading创建与销毁:
50|参数|说明|类型|默认值|
51|:---|:-----|:----|:------|
52| Loading.create(obj)| 在请求数据之前调用这个方法,参数obj是个对象（后面解释),用来显示loading|function|
53| Loading.destroy();| 后端返回数据之后调用这个方法,用来销毁loading|function|
54#### loading的obj参数: 
55|参数|说明|类型|默认值|
56|:---|:-----|:----|:------|
57|loadingType|loading的类型,有rotate和line俩种|string|-|
58|backColor|loading的背景色，不是遮罩层的颜色|string|[]|
59|content|loading中需要提示的文字|string|-|
60|loading_show| 全局loading和多个局部loading需要同时显示的时候,需要添加，其他情况不需要添加这个属性|boolean||
61#### 局部刷新loading注意事项：
62**创建局部loading:**
63- 给需要局部刷新的区域添加样式:
64```
65    className="addLoading loading_flag1"
66```
67
68
69- 比如：
70```
71    <div className="addLoading loading_flag1">
72                <Table
73                  columns={columns}
74                  data={data}
75                />
76    </div>
77```
78---
79**销毁局部loading:**
80- 需要传入销毁的loading_flag1，这个loading_flag1可以自己更改，切记创建和销毁保持一致就好
81- 比如:
82```
83     Loading.destroy(loading_flag);
84```
85
86
87#### 开发调试
88
89```sh
90$ npm install -g bee-tools
91$ git clone https://github.com/tinper-bee/bee-loading
92$ cd bee-loading
93$ npm install
94$ npm run dev
95```

1	`# bee-loading`
2
3	`[![npm version](https://img.shields.io/npm/v/bee-loading.svg)](https://www.npmjs.com/package/bee-loading)`
4	`[![Build Status](https://img.shields.io/travis/tinper-bee/bee-loading/master.svg)](https://travis-ci.org/tinper-bee/bee-loading)`
5	`[![Coverage Status](https://coveralls.io/repos/github/tinper-bee/bee-loading/badge.svg?branch=master)](https://coveralls.io/github/tinper-bee/bee-loading?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 11+ ✔ \| Chrome 31.0+ ✔ \|`
13
14
15	`react bee-loading component for tinper-bee`
16
17	`some description...`
18
19	`## 使用方法`
20
21	`### 使用单独的loading包`
22	`#### 组件引入`
23	`先进行下载bee-loading包`
24
25	```
26	`npm install --save bee-loading`
27	```
28	`组件调用`
29
30	```js
31	`import Loading from 'bee-loading';`
32
33	`Loading.create({loadingType:"line",content: 'loading'});`
34
35	```
36
37	`#### 样式引入`
38	`- 可以使用link引入build目录下button.css`
39	```
40	`<link rel="stylesheet" href="./node_modules/bee-loading/build/Loading.css">`
41	```
42	`- 可以在js中import样式`
43	```js
44	`import "./node_modules/bee-loading/src/Loading.scss"`
45	`//或是`
46	`import "./node_modules/bee-loading/build/Loding.css"`
47	```
48
49	`#### loading创建与销毁:`
50	`\|参数\|说明\|类型\|默认值\|`
51	`\|:---\|:-----\|:----\|:------\|`
52	`\| Loading.create(obj)\| 在请求数据之前调用这个方法,参数obj是个对象（后面解释),用来显示loading\|function\|`
53	`\| Loading.destroy();\| 后端返回数据之后调用这个方法,用来销毁loading\|function\|`
54	`#### loading的obj参数:`
55	`\|参数\|说明\|类型\|默认值\|`
56	`\|:---\|:-----\|:----\|:------\|`
57	`\|loadingType\|loading的类型,有rotate和line俩种\|string\|-\|`
58	`\|backColor\|loading的背景色，不是遮罩层的颜色\|string\|[]\|`
59	`\|content\|loading中需要提示的文字\|string\|-\|`
60	`\|loading_show\| 全局loading和多个局部loading需要同时显示的时候,需要添加，其他情况不需要添加这个属性\|boolean\|\|`
61	`#### 局部刷新loading注意事项：`
62	`创建局部loading:`
63	`- 给需要局部刷新的区域添加样式:`
64	```
65	`className="addLoading loading_flag1"`
66	```
67
68
69	`- 比如：`
70	```
71	`<div className="addLoading loading_flag1">`
72	`<Table`
73	`columns={columns}`
74	`data={data}`
75	`/>`
76	`</div>`
77	```
78	`---`
79	`销毁局部loading:`
80	`- 需要传入销毁的loading_flag1，这个loading_flag1可以自己更改，切记创建和销毁保持一致就好`
81	`- 比如:`
82	```
83	`Loading.destroy(loading_flag);`
84	```
85
86
87	`#### 开发调试`
88
89	```sh
90	`$ npm install -g bee-tools`
91	`$ git clone https://github.com/tinper-bee/bee-loading`
92	`$ cd bee-loading`
93	`$ npm install`
94	`$ npm run dev`
95	```