bee-viewer

react bee-viewer component for tinper-bee

some description...

依赖

• react >= 15.3.0
• react-dom >= 15.3.0
• prop-types >= 15.6.0

使用方法

import React, { Component } from 'react';
import Viewer from '../../src'

class Demo1 extends Component {

    shown=(e)=>{
        console.log(e,'shwon')
    }
    hidden=(e)=>{
        console.log(e,'hidden')
    }
    render () {
        return (
            <Viewer shown={this.shown} hidden={this.hidden}>
                <img id="image" src='http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-1-min.jpg' alt="Picture"/>
            </Viewer>
        )
    }
}
export default Demo1

API

|参数|说明|类型|默认值| |:---|:-----|:----|:------| |asyncLoad|图片是否异步加载|bool|false| |inline|启用 inline 模式|bool|false| |button|显示右上角关闭按钮|bool|true| |navbar|显示缩略图导航|bool|true| |title|显示当前图片的alt属性及图片尺寸|bool|true| |toolbar|显示工具栏|bool|true| |tooltip|显示缩放百分比|bool|true| |movable|图片是否可移动|bool|true| |zoomable|图片是否可缩放|bool|true| |rotatable|图片是否可旋转|bool|true| |scalable|图片是否可翻转|bool|true| |transition|使用 CSS3 过度|bool|true| |fullscreen|播放时是否全屏|bool|true| |keyboard|是否支持键盘|bool|true| |interval|播放间隔，单位为毫秒|number|5000| |zoomRatio|鼠标滚动时的缩放比例|number|0.1| |minZoomRatio|最小缩放比例|number|0.01| |maxZoomRatio|最大缩放比例|number|100| |zIndex|设置图片查看器 modal 模式时的 z-index|number|2015| |zIndexInline|设置图片查看器 inline 模式时的 z-index|number|0| |container|设置图片查看器 modal 模式的容器，inline 模式无效|element|body| |shown|图片查看器显示后的回调|func|()=>{}| |hidden|图片查看器关闭后的回调|func|()=>{}|

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-viewer
$ cd bee-viewer
$ npm install
$ npm run dev