react-uif

react-uif是一款基于react的第三方组件库，其中有上拉加载，图片拉大，选择器等组件。demo展示：http://www.reactdemo.top/

Usage no npm install needed!

<script type="module">
  import reactUif from 'https://cdn.skypack.dev/react-uif';
</script>

README

react-uif是一款基于react的第三方组件库，其中有上拉加载，图片拉大，选择器等组件。demo展示：http://www.reactdemo.top/

1、下载组件库

npm install react-uif

2、引用组件

import {Abnormal ,Loader ,LoaderTwo ,LoaderThree ,Link ,Load ,Modal ,Refresh ,Select ,Tab ,TextTip ,WheelPlant ,Zoom} from 'react-uif';

3、使用组件

一、暂无数据

import React, { Component } from 'react'; import {Abnormal} from 'react-uif'; import nodataInit from '../image/nodata-init.png';

class AbnormalDemo extends Component {

constructor(props){ super(props); }

render() { return (

); }

}

export default AbnormalDemo;

二、css3动画

import React, { Component } from 'react'; import {Loader} from 'react-uif'; import {LoaderTwo} from 'react-uif'; import {LoaderThree} from 'react-uif';

class AnimationDemo extends Component {

constructor(props){ super(props); }

render() { return (

); }

componentDidMount(){

}

}

export default AnimationDemo;

三、链接模态框

import React, { Component } from 'react'; import {Link} from 'react-uif';

class AnimationDemo extends Component {

constructor(props){ super(props); }

render() { return (

alert('取消时的回调')} successCallBack={()=>alert('确认后的回调')} />
); }

}

export default AnimationDemo;

四、加载模块

import React, { Component } from 'react'; import {Load} from 'react-uif';

class LoadDemo extends Component {

constructor(props){ super(props); }

render() { return (

); }

}

export default LoadDemo;

五、确认模态框

import React, { Component } from 'react'; import {Modal} from 'react-uif';

class ModalDemo extends Component {

constructor(props){ super(props); }

render() { return (

alert("失败后的回调")} successCallBack={()=>alert("确认后的回调")} />
); }

}

export default ModalDemo;

六、提示框

import React, { Component } from 'react'; import {TextTip} from 'react-uif';;

class TextTipDemo extends Component {

constructor(props){ super(props); }

render() { return (

); }

componentDidMount(){

}

}

export default TextTipDemo;

七、选择器

import React, { Component } from 'react'; import {Select} from 'react-uif';

class SelectDemo extends Component {

constructor(props){ super(props); this.state={ timeStatus:true, selectValue:"", select:[ [{name:"长沙"},{name:"岳阳"},{name:"衡阳"},{name:"益阳",flag:true},{name:"株洲",flag:true},{name:"常德"}], [{name:"一号"},{name:"二号"},{name:"三号",flag:true},{name:"四号"},{name:"五号"},{name:"六号"},{name:"七号"},{name:"八号"},{name:"九号"}], [{name:"菊花",flag:true},{name:"荷花"},{name:"太阳花"},{name:"栀子花"}], ] } }

render() { let {timeStatus ,selectValue} = this.state; return (