xy-loading-react

英语不好，文档里的英文版是谷歌翻译的，如果不准确请见谅

xy-loading-react是一个为react项目提供多种样式的loading动画和加载占位图的模块

loading动画/加载占位图样式会持续增加，欢迎补充和提需求

English is not good, the English version of the document is Google translation, if not accurate, please forgive me

xy-loading-react is a multi-style loading animation for react projects and a module for loading bitmaps

loading animation / loading bitmap style will continue to increase, are welcome to add and demand

安装 Installation

$ npm i xy-loading-react --save 

使用 Usage

// 引入 Introduced
import XyLoading from 'xy-loading-react';

// 调用 transfer
<XyLoading type="skeleton1" visibility="true"/>

参数 Available Props

| prop | 类型 type | 默认值 default value | 说明 description | | ---------- | ------- | ----------------- | ------------------ | | type | string | skeleton1 | Loaidng动画和加载占位图的类型 | | visibility | bool | true | 该组件是否可见 |

例子 examples

import React from 'react';
import XyLoading from 'xy-loading-react';

export default class MyComponent extends React.Component{
  
 constructor(props,that) {
     super(props);
     this.state = {
         loadingVisibility:true, 
     };
  }
  
  componentWillMount(){
    
      // 在数据请求完毕后，修改state中XyLoading的可见性
      // After the data request is completed, modify the visibility of XyLoading in state
    
      this.setState({
          loadingVisibility:false, 
      })
      
  }
  
  render(){
    
    // 根据state中的loadingVisibility判断数据是否加载完毕
    // 若加载完则正常显示内容，若未加载完则显示XyLoading
    
    // According to loadingVisibility state to determine whether the data is loaded
    // If loaded finished the normal display, if not loaded then display XyLoading
    
    if(!this.state.loadingVisibility){
        return (
    	  <div>
        	 {this.state.content}
          </div>
        )
    }else{
        return (
    	  <XyLoading type="skeleton1" visibility={this.state.loadingVisibility} />
        )
    }
    
  }
}

type参数效果预览 type parameter effect preview

骨架图类型 Skeleton graph type

| | | | | | :--------------------------------------: | :--------------------------------------: | :--------------------------------------: | :--------------------------------------: | | | | | | | skeleton1 | skeleton2 | skeleton3 | skeleton4 |