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
组件调用
; { superprops; thisstate = showRotate: false } { this } { return <div> <Button colors="primary" onClick=thishandleShow> 点击显示默认loading </Button> <Loading showBackDrop=true show=thisstateshowRotate /> </div> }
样式引入
- 可以使用link引入build目录下button.css
<link rel="stylesheet" href="./node_modules/bee-loading/build/Loading.css">
- 可以在js中import样式
//或是
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