(window.webpackJsonp=window.webpackJsonp||[]).push([[126],{727:function(n,a,s){"use strict";s.r(a),s.d(a,"default",function(){return B});var t=s(580),p=s.n(t),e=s(581),o=s.n(e),c=s(32),u=s.n(c),l=s(28),i=s.n(l),k=s(23),r=s.n(k),d=s(24),m=s.n(d),g=s(25),h=s.n(g),w=s(26),v=s.n(w),y=s(27),f=s.n(y),b=s(0),x=s.n(b),E=s(111),N=s(82),S=function(){var n=[1,2,3,4,5],a=function(a){function s(){return r()(this,s),h()(this,v()(s).apply(this,arguments))}return f()(s,a),m()(s,[{key:"render",value:function(){return x.a.createElement("div",{className:"swiper-demo-container"},x.a.createElement(N.wb,{className:"swiper-demo-simple"},n.map(function(n,a){return x.a.createElement("div",{className:"swiper-demo-simple-h",key:a},n)})),x.a.createElement(N.wb,{className:"swiper-demo-simple",dotsColor:"#31A896",dotsSize:"small"},n.map(function(n,a){return x.a.createElement("div",{className:"swiper-demo-simple-h",key:a},n)})))}}]),s}(x.a.Component);return x.a.createElement(a,null)},C=function(){var n=[1,2,3,4,5],a=function(a){function s(){var n,a;r()(this,s);for(var t=arguments.length,p=new Array(t),e=0;eSwiper\n

Swiper is used for a group of flat content circulated.

\n

Demos

'}),x.a.createElement(P,{title:"Basic Usage",id:"Demobasic",src:'import { Swiper } from \'zent\';\n\nconst pages = [1, 2, 3, 4, 5];\n\nclass Simple extends React.Component {\n render() {\n return (\n <div className="swiper-demo-container">\n <Swiper\n className="swiper-demo-simple"\n >\n {\n pages.map((item, index) => {\n return <div className="swiper-demo-simple-h" key={index}>{item}</div>;\n })\n }\n </Swiper>\n <Swiper\n className="swiper-demo-simple"\n dotsColor="#31A896"\n dotsSize="small"\n >\n {\n pages.map((item, index) => {\n return <div className="swiper-demo-simple-h" key={index}>{item}</div>;\n })\n }\n </Swiper>\n </div>\n\n );\n }\n}\n\nReactDOM.render(\n <Simple />\n , mountNode\n);'},x.a.createElement(S)),x.a.createElement(P,{title:"With Arrows, Switch Automaticly",id:"Demoarrow",src:'import { Swiper } from \'zent\';\n\nconst pages = [1, 2, 3, 4, 5];\n\nclass Simple extends React.Component {\n\n state = {\n current: null,\n prev: null\n }\n\n handleChange = (current, prev) => {\n this.setState({ current, prev });\n }\n\n render() {\n const { current, prev } = this.state;\n return (\n <div>\n <Swiper\n className="swiper-demo-simple"\n dotsColor="red"\n dotsSize="small"\n arrows\n autoplay\n onChange={this.handleChange}\n >\n {\n pages.map((item, index) => {\n return <div className="swiper-demo-simple-h" key={index}>{item}</div>;\n })\n }\n </Swiper>\n {\n typeof current === \'number\' && typeof prev === \'number\' &&\n <div className="swiper-demo-simple-text">from {prev + 1} to {current + 1}</div>\n }\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Simple />\n , mountNode\n);'},x.a.createElement(C)),x.a.createElement(P,{title:"Controlled by Instance Methods",id:"Demomethod",src:'import { Swiper, Button } from \'zent\';\n\nconst pages = [1, 2, 3, 4, 5];\n\nclass Simple extends React.Component {\n\n go = (index) => {\n this.swiper.swipeTo(index);\n }\n\n prev = () => {\n this.swiper.prev();\n }\n\n next = () => {\n this.swiper.next();\n }\n\n render() {\n return (\n <div className="swiper-demo-container no-flex">\n <Swiper\n ref={(swiper) => this.swiper = swiper}\n className="swiper-demo-simple"\n >\n {\n pages.map((item, index) => {\n return <div className="swiper-demo-simple-h" key={index}>{item}</div>;\n })\n }\n </Swiper>\n <div className="swiper-demo-btn-group">\n {\n pages.map((item, index) => {\n return (\n <Button\n key={index}\n type="primary"\n onClick={() => this.go(index)}\n >\n {item}\n </Button>\n );\n })\n }\n <Button\n type="primary"\n outline\n onClick={() => this.prev()}>\n prev\n </Button>\n <Button\n type="primary"\n outline\n onClick={() => this.next()}>\n next\n </Button>\n </div>\n </div>\n\n );\n }\n}\n\nReactDOM.render(\n <Simple />\n , mountNode\n);'},x.a.createElement(z)),x.a.createElement(P,{title:"Dynamically add or remove child elements",id:"Demodynamicaddchild",src:'import { Swiper, Button } from \'zent\';\n\nclass Simple extends React.Component {\n\n state = {\n pages: [1, 2, 3, 4, 5]\n }\n\n handleAddPage = () => {\n const { pages } = this.state;\n const lastItem = pages[pages.length - 1];\n console.log(lastItem);\n this.setState({\n pages: [...pages, lastItem + 1]\n });\n }\n\n handleRemovePage = () => {\n const { pages } = this.state;\n const newPages = pages.filter((item, index) => index !== pages.length - 1);\n this.setState({\n pages: newPages\n });\n }\n\n render() {\n const { pages } = this.state;\n return (\n <div>\n <Swiper\n className="swiper-demo-simple"\n dotsColor="#fc0"\n dotsSize="small"\n arrows\n autoplay\n >\n {\n pages.map((item, index) => {\n return <div className="swiper-demo-simple-h" key={index}>{item}</div>;\n })\n }\n </Swiper>\n <div style={{ marginTop: \'20px\' }}>\n <Button type="primary" onClick={this.handleAddPage}>add</Button>\n <Button type="primary" outline onClick={this.handleRemovePage}>remove</Button>\n </div>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Simple />\n , mountNode\n);'},x.a.createElement(j)),x.a.createElement(_,{html:'

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescriptionTypeDefaultOptional
transitionDurationswitch animation duration(ms)number300
autoplayswitch automaticallyboolfalsetrue
autoplayIntervalautomatic switch interval(ms)number3000
dotswether to show the page button belowbooltruefalse
dotsColorpage button colorstring\'black\'any css color value in string
dotsSizepage button sizestring\'normal\'\'small\'\n, \n\'large\'
arrowswether to show flip button on both sidesboolfalse
arrowsTypeflip button colorstring\'dark\'\'dark\'\n, \n\'light\'
onChangeswitch callback(current: number, prev: number): voidnoop
classNamecustom classnamestring\'\'
prefixcustom prefixstring\'zent\'
\n

Instance Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Method NameInstructionParameterParameter Description
swipeTomanual switch the contentindexfigure index, 0 based
prevswitch to the previous
nextswitch to the next
'}))}}]),a}(b.Component)}}]);