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