tinper-beebee-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