react-component-lib/example/dist/chunk/5.92031992.js

a full base ui library to reactjs

webpackJsonp([5],{49:function(e,t,r){var n=React.createClass({displayName:"Example",getColors:function(e){var t=["#feeeed","#f47920","#80752c","#2a5caa","#f7acbc","#deab8a","#837936","#444693","#ef5b9c","#fedcbd","#7f7522","#2b4490","#f05b72","#905a3d","#87843b","#224b8f"];return t[e%t.length]},getSlides:function(e,t,r){for(var n=[],a=0;e>a;a++){var i={backgroundColor:this.getColors(a),width:"undefined"!=typeof t?Math.random()*(r-t)+t:""};n.push(React.createElement(RUI.Slider.Item,{key:a},React.createElement("div",{className:"slide-content",style:i},"Slide-",a+1)))}return n},getImageSlide:function(){return["http://5doe.com/custom/demo/images/wave_photo_1.jpg","http://5doe.com/custom/demo/images/wave_photo_2.jpg","http://5doe.com/custom/demo/images/wave_photo_3.jpg","http://5doe.com/custom/demo/images/wave_photo_4.jpg"].map(function(e,t){return React.createElement(RUI.Slider.Item,{key:t},React.createElement("img",{src:e,style:{height:300}}))})},getThumbSlide:function(){return["http://5doe.com/custom/demo/images/wave_photo_1.jpg","http://5doe.com/custom/demo/images/wave_photo_2.jpg","http://5doe.com/custom/demo/images/wave_photo_3.jpg","http://5doe.com/custom/demo/images/wave_photo_4.jpg"].map(function(e,t){return React.createElement(RUI.Slider.Item,{key:t},React.createElement("img",{src:e,style:{height:80}}))})},componentDidMount:function(){this.refs.big.setControl(this.refs.thumb.getSwiper()),this.refs.thumb.setControl(this.refs.big.getSwiper())},render:function(){return React.createElement("div",{className:"example-slider"},React.createElement("h2",{className:"title"},"轮播图",React.createElement("span",null,"Slider")),React.createElement("h3",{className:"sub-title"},"演示"),React.createElement("div",{className:"example"},React.createElement("h4",{className:"final-title"},"自动播放"),React.createElement("div",null,React.createElement(RUI.Slider,null,this.getSlides(4))),React.createElement("h4",{className:"final-title"},"分页信息"),React.createElement("div",null,React.createElement(RUI.Slider,null,this.getSlides(6),React.createElement(RUI.Slider.Pagination,{useClick:!0}))),React.createElement("h4",{className:"final-title"},"左右切换按钮"),React.createElement("div",null,React.createElement(RUI.Slider,null,this.getSlides(8),React.createElement(RUI.Slider.Pagination,{useClick:!0}),React.createElement(RUI.Slider.NavigateButton,{role:"prev"}),React.createElement(RUI.Slider.NavigateButton,{role:"next"}))),React.createElement("h4",{className:"final-title"},"不规则自动布局"),React.createElement("div",null,React.createElement(RUI.Slider,{slidesPerView:"auto",centeredSlides:!0,spaceBetween:30,className:"auto-layout"},this.getSlides(18,150,600),React.createElement(RUI.Slider.Pagination,{useClick:!0}))),React.createElement("h4",{className:"final-title"},"缩略图"),React.createElement("div",null,React.createElement(RUI.Slider,{ref:"big",centeredSlides:!0},this.getImageSlide()),React.createElement(RUI.Slider,{ref:"thumb",thumb:!0},this.getThumbSlide(8)))),React.createElement("h3",{className:"sub-title"},"源码"),React.createElement("div",{className:"source"},React.createElement("textarea",{defaultValue:r(99)})))}});e.exports=n},99:function(e,t){e.exports="var Example = React.createClass({\r\n    getColors:function(index) {\r\n        var colors = [\r\n            '#feeeed', '#f47920', '#80752c', '#2a5caa',\r\n            '#f7acbc', '#deab8a', '#837936', '#444693',\r\n            '#ef5b9c', '#fedcbd', '#7f7522', '#2b4490',\r\n            '#f05b72', '#905a3d', '#87843b', '#224b8f'\r\n        ];\r\n        return colors[index % colors.length];\r\n    },\r\n    getSlides:function(num, minWidth, maxWidth) {\r\n        var result = [];\r\n        for(var index =0;index<num;index++) {\r\n            var styles = {\r\n                backgroundColor:this.getColors(index),\r\n                width:(typeof minWidth != 'undefined') ? (Math.random() * (maxWidth - minWidth) + minWidth) : ''\r\n            };\r\n            result.push(<RUI.Slider.Item key={index}>\r\n                <div className=\"slide-content\" style={styles}>\r\n                    Slide-{index+1}\r\n                </div>\r\n            </RUI.Slider.Item>);\r\n        }\r\n        return result;\r\n    },\r\n    getImageSlide:function() {\r\n        return [\r\n            'http://5doe.com/custom/demo/images/wave_photo_1.jpg',\r\n            'http://5doe.com/custom/demo/images/wave_photo_2.jpg',\r\n            'http://5doe.com/custom/demo/images/wave_photo_3.jpg',\r\n            'http://5doe.com/custom/demo/images/wave_photo_4.jpg'\r\n        ].map(function(image, index) {\r\n            return <RUI.Slider.Item key={index}>\r\n                <img src={image} style={{height:300}} />\r\n            </RUI.Slider.Item>\r\n        });\r\n    },\r\n    getThumbSlide:function() {\r\n        return [\r\n            'http://5doe.com/custom/demo/images/wave_photo_1.jpg',\r\n            'http://5doe.com/custom/demo/images/wave_photo_2.jpg',\r\n            'http://5doe.com/custom/demo/images/wave_photo_3.jpg',\r\n            'http://5doe.com/custom/demo/images/wave_photo_4.jpg'\r\n        ].map(function(image, index) {\r\n            return <RUI.Slider.Item key={index}>\r\n                <img src={image} style={{height:80}}/>\r\n            </RUI.Slider.Item>\r\n        });\r\n    },\r\n    componentDidMount:function() {\r\n        this.refs.big.setControl(this.refs.thumb.getSwiper());\r\n        this.refs.thumb.setControl(this.refs.big.getSwiper());\r\n    },\r\n    render:function() {\r\n        return <div className=\"example-slider\">\r\n            <h2 className=\"title\">轮播图<span>Slider</span></h2>\r\n            <h3 className=\"sub-title\">演示</h3>\r\n            <div className=\"example\">\r\n                <h4 className=\"final-title\">自动播放</h4>\r\n                <div>\r\n                    <RUI.Slider>\r\n                        {this.getSlides(4)}\r\n                    </RUI.Slider>\r\n                </div>\r\n                <h4 className=\"final-title\">分页信息</h4>\r\n                <div>\r\n                    <RUI.Slider>\r\n                        {this.getSlides(6)}\r\n                        <RUI.Slider.Pagination useClick={true} />\r\n                    </RUI.Slider>\r\n                </div>\r\n                <h4 className=\"final-title\">左右切换按钮</h4>\r\n                <div>\r\n                    <RUI.Slider>\r\n                        {this.getSlides(8)}\r\n                        <RUI.Slider.Pagination useClick={true} />\r\n                        <RUI.Slider.NavigateButton role=\"prev\" />\r\n                        <RUI.Slider.NavigateButton role=\"next\" />\r\n                    </RUI.Slider>\r\n                </div>\r\n                <h4 className=\"final-title\">不规则自动布局</h4>\r\n                <div>\r\n                    <RUI.Slider slidesPerView={\"auto\"} centeredSlides={true} spaceBetween={30} className={\"auto-layout\"}>\r\n                        {this.getSlides(18, 150, 600)}\r\n                        <RUI.Slider.Pagination useClick={true} />\r\n                    </RUI.Slider>\r\n                </div>\r\n                <h4 className=\"final-title\">缩略图</h4>\r\n                <div>\r\n                    <RUI.Slider ref=\"big\" centeredSlides={true}>\r\n                        {this.getImageSlide()}\r\n                    </RUI.Slider>\r\n                    <RUI.Slider ref=\"thumb\" thumb={true}>\r\n                        {this.getThumbSlide(8)}\r\n                    </RUI.Slider>\r\n                </div>\r\n            </div>\r\n            <h3 className=\"sub-title\">源码</h3>\r\n            <div className=\"source\">\r\n                <textarea defaultValue={require('raw!./slider.js')} />\r\n            </div>\r\n        </div>;\r\n    }\r\n});\r\n\r\nmodule.exports = Example;"}});