UNPKG

bee-viewer/README.md

Version:

3.08 kBMarkdownView Raw

1# bee-viewer
2
3[![npm version](https://img.shields.io/npm/v/bee-viewer.svg)](https://www.npmjs.com/package/bee-viewer)
4[![Build Status](https://img.shields.io/travis/tinper-bee/bee-viewer/master.svg)](https://travis-ci.org/tinper-bee/bee-viewer)
5[![Coverage Status](https://coveralls.io/repos/github/tinper-bee/bee-viewer/badge.svg?branch=master)](https://coveralls.io/github/tinper-bee/bee-viewer?branch=master)
6[![devDependency Status](https://img.shields.io/david/dev/tinper-bee/bee-viewer.svg)](https://david-dm.org/tinper-bee/bee-viewer#info=devDependencies)
7[![NPM downloads](http://img.shields.io/npm/dm/bee-viewer.svg?style=flat)](https://npmjs.org/package/bee-viewer)
8[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/tinper-bee/bee-viewer.svg)](http://isitmaintained.com/project/tinper-bee/bee-viewer "Average time to resolve an issue")
9[![Percentage of issues still open](http://isitmaintained.com/badge/open/tinper-bee/bee-viewer.svg)](http://isitmaintained.com/project/tinper-bee/bee-viewer "Percentage of issues still open")
10
11
12react bee-viewer component for tinper-bee
13
14some description...
15
16## 依赖
17
18- react >= 15.3.0
19- react-dom >= 15.3.0
20- prop-types >= 15.6.0
21
22## 使用方法
23
24```
25
26import React, { Component } from 'react';
27import Viewer from '../../src'
28
29class Demo1 extends Component {
30
31    shown=(e)=>{
32        console.log(e,'shwon')
33    }
34    hidden=(e)=>{
35        console.log(e,'hidden')
36    }
37    render () {
38        return (
39            <Viewer shown={this.shown} hidden={this.hidden}>
40                <img id="image" src='http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-1-min.jpg' alt="Picture"/>
41            </Viewer>
42        )
43    }
44}
45export default Demo1
46
47```
48
49
50
51## API
52
53|参数|说明|类型|默认值|
54|:---|:-----|:----|:------|
55|inline|启用 inline 模式|bool|false|
56|button|显示右上角关闭按钮|bool|true|
57|navbar|显示缩略图导航|bool|true|
58|title|显示当前图片的alt属性及图片尺寸|bool|true|
59|toolbar|显示工具栏|bool|true|
60|tooltip|显示缩放百分比|bool|true|
61|movable|图片是否可移动|bool|true|
62|zoomable|图片是否可缩放|bool|true|
63|rotatable|图片是否可旋转|bool|true|
64|scalable|图片是否可翻转|bool|true|
65|transition|使用 CSS3 过度|bool|true|
66|fullscreen|播放时是否全屏|bool|true|
67|keyboard|是否支持键盘|bool|true|
68|interval|播放间隔，单位为毫秒|number|5000|
69|zoomRatio|鼠标滚动时的缩放比例|number|0.1|
70|minZoomRatio|最小缩放比例|number|0.01|
71|maxZoomRatio|最大缩放比例|number|100|
72|zIndex|设置图片查看器 modal 模式时的 z-index|number|2015|
73|zIndexInline|设置图片查看器 inline 模式时的 z-index|number|0|
74|container|设置图片查看器 modal 模式的容器，inline 模式无效|element|body|
75|shown|图片查看器显示后的回调|func|()=>{}|
76|hidden|图片查看器关闭后的回调|func|()=>{}|
77
78#### 开发调试
79
80```sh
81$ npm install -g bee-tools
82$ git clone https://github.com/tinper-bee/bee-viewer
83$ cd bee-viewer
84$ npm install
85$ npm run dev
86```

1	`# bee-viewer`
2
3	`[![npm version](https://img.shields.io/npm/v/bee-viewer.svg)](https://www.npmjs.com/package/bee-viewer)`
4	`[![Build Status](https://img.shields.io/travis/tinper-bee/bee-viewer/master.svg)](https://travis-ci.org/tinper-bee/bee-viewer)`
5	`[![Coverage Status](https://coveralls.io/repos/github/tinper-bee/bee-viewer/badge.svg?branch=master)](https://coveralls.io/github/tinper-bee/bee-viewer?branch=master)`
6	`[![devDependency Status](https://img.shields.io/david/dev/tinper-bee/bee-viewer.svg)](https://david-dm.org/tinper-bee/bee-viewer#info=devDependencies)`
7	`[![NPM downloads](http://img.shields.io/npm/dm/bee-viewer.svg?style=flat)](https://npmjs.org/package/bee-viewer)`
8	`[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/tinper-bee/bee-viewer.svg)](http://isitmaintained.com/project/tinper-bee/bee-viewer "Average time to resolve an issue")`
9	`[![Percentage of issues still open](http://isitmaintained.com/badge/open/tinper-bee/bee-viewer.svg)](http://isitmaintained.com/project/tinper-bee/bee-viewer "Percentage of issues still open")`
10
11
12	`react bee-viewer component for tinper-bee`
13
14	`some description...`
15
16	`## 依赖`
17
18	`- react >= 15.3.0`
19	`- react-dom >= 15.3.0`
20	`- prop-types >= 15.6.0`
21
22	`## 使用方法`
23
24	```
25
26	`import React, { Component } from 'react';`
27	`import Viewer from '../../src'`
28
29	`class Demo1 extends Component {`
30
31	`shown=(e)=>{`
32	`console.log(e,'shwon')`
33	`}`
34	`hidden=(e)=>{`
35	`console.log(e,'hidden')`
36	`}`
37	`render () {`
38	`return (`
39	`<Viewer shown={this.shown} hidden={this.hidden}>`
40	`<img id="image" src='http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-1-min.jpg' alt="Picture"/>`
41	`</Viewer>`
42	`)`
43	`}`
44	`}`
45	`export default Demo1`
46
47	```
48
49
50
51	`## API`
52
53	`\|参数\|说明\|类型\|默认值\|`
54	`\|:---\|:-----\|:----\|:------\|`
55	`\|inline\|启用 inline 模式\|bool\|false\|`
56	`\|button\|显示右上角关闭按钮\|bool\|true\|`
57	`\|navbar\|显示缩略图导航\|bool\|true\|`
58	`\|title\|显示当前图片的alt属性及图片尺寸\|bool\|true\|`
59	`\|toolbar\|显示工具栏\|bool\|true\|`
60	`\|tooltip\|显示缩放百分比\|bool\|true\|`
61	`\|movable\|图片是否可移动\|bool\|true\|`
62	`\|zoomable\|图片是否可缩放\|bool\|true\|`
63	`\|rotatable\|图片是否可旋转\|bool\|true\|`
64	`\|scalable\|图片是否可翻转\|bool\|true\|`
65	`\|transition\|使用 CSS3 过度\|bool\|true\|`
66	`\|fullscreen\|播放时是否全屏\|bool\|true\|`
67	`\|keyboard\|是否支持键盘\|bool\|true\|`
68	`\|interval\|播放间隔，单位为毫秒\|number\|5000\|`
69	`\|zoomRatio\|鼠标滚动时的缩放比例\|number\|0.1\|`
70	`\|minZoomRatio\|最小缩放比例\|number\|0.01\|`
71	`\|maxZoomRatio\|最大缩放比例\|number\|100\|`
72	`\|zIndex\|设置图片查看器 modal 模式时的 z-index\|number\|2015\|`
73	`\|zIndexInline\|设置图片查看器 inline 模式时的 z-index\|number\|0\|`
74	`\|container\|设置图片查看器 modal 模式的容器，inline 模式无效\|element\|body\|`
75	`\|shown\|图片查看器显示后的回调\|func\|()=>{}\|`
76	`\|hidden\|图片查看器关闭后的回调\|func\|()=>{}\|`
77
78	`#### 开发调试`
79
80	```sh
81	`$ npm install -g bee-tools`
82	`$ git clone https://github.com/tinper-bee/bee-viewer`
83	`$ cd bee-viewer`
84	`$ npm install`
85	`$ npm run dev`
86	```