bee-loading

Browser Support

| | | | | | | --- | --- | --- | --- | --- | | IE 11+ ✔ | Chrome 31.0+ ✔ |

react bee-loading component for tinper-bee

some description...

使用方法

使用单独的loading包

组件引入

先进行下载bee-loading包

npm install --save bee-loading

组件调用

import Loading from 'bee-loading';


class LoadingDemo extends Component{
constructor(props) {
    super(props);
    this.state = {
      showRotate: false
    }
  }

  handleShow = () => {
        this.setState({
            showRotate: true
        })
        setTimeout(() => {
            this.setState({
                showRotate: false
            })
        }, 5000)

    }

    render() {
     return (
     <div>
     <Button
         colors="primary"
         onClick={this.handleShow}>
         点击显示默认loading
     </Button>
     <Loading
         showBackDrop={true}
         show={this.state.showRotate}
     />
     </div>

     )
    }

}

样式引入

• 可以使用link引入build目录下button.css

<link rel="stylesheet" href="./node_modules/bee-loading/build/Loading.css">

• 可以在js中import样式

import "./node_modules/bee-loading/src/Loading.scss"
//或是
import "./node_modules/bee-loading/build/Loding.css"

API

Loading Props

|参数|说明|类型|默认值| |:---|:----|:----|:------| |loadingType|类型(rotate line custom)|string|rotate| |indicator|加载图标，在 loadingType 值为 custom 时有效|ReactElement|-| |size|加载大小(lg md sm)|string|md| |color|颜色(primary success``warning)|string|''| |container|渲染到的容器|node|body| |showBackDrop|是否显示遮罩|boolean|true| |fullScreen|是否全屏显示，或者只传入fullScreen即可|boolean|false| |wrapperClassName|容器样式|string|''|

开发调试

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