(window.webpackJsonp=window.webpackJsonp||[]).push([[106],{725:function(n,s,a){"use strict";a.r(s),a.d(s,"default",function(){return I});var t=a(580),p=a.n(t),e=a(32),o=a.n(e),c=a(28),l=a.n(c),u=a(23),r=a.n(u),k=a(24),i=a.n(k),d=a(25),m=a.n(d),g=a(26),v=a.n(g),f=a(27),h=a.n(f),y=a(0),b=a.n(y),w=a(111),E=a(82),C=function(){var n=function(n){function s(){return r()(this,s),m()(this,v()(s).apply(this,arguments))}return h()(s,n),i()(s,[{key:"render",value:function(){return b.a.createElement("div",{className:"zent-progress-demo"},b.a.createElement(E.kb,{percent:70}),b.a.createElement(E.kb,{type:"circle",percent:70}))}}]),s}(y.Component);return b.a.createElement(n,null)},P=function(){var n=function(n){function s(){var n,a;r()(this,s);for(var t=arguments.length,p=new Array(t),e=0;e=100&&(n=100),a.setState({value:n})}),l()(o()(a),"decrease",function(){var n=a.state.value-10;n<0&&(n=0),a.setState({value:n})}),a}return h()(s,n),i()(s,[{key:"render",value:function(){var n=this.state.value;return b.a.createElement("div",{className:"zent-progress-demo"},b.a.createElement(E.kb,{percent:n}),b.a.createElement(E.kb,{type:"circle",percent:n}),b.a.createElement("div",null,b.a.createElement(E.i,{onClick:this.decrease},"-"),b.a.createElement(E.i,{onClick:this.increase},"+")))}}]),s}(y.Component);return b.a.createElement(n,null)},z=function(){var n=function(n){function s(){return r()(this,s),m()(this,v()(s).apply(this,arguments))}return h()(s,n),i()(s,[{key:"render",value:function(){return b.a.createElement("div",{className:"zent-progress-demo"},b.a.createElement(E.kb,{percent:70,width:300,strokeWidth:5}),b.a.createElement(E.kb,{type:"circle",percent:80,width:76,strokeWidth:5}))}}]),s}(y.Component);return b.a.createElement(n,null)},j=function(){var n=function(n){function s(){return r()(this,s),m()(this,v()(s).apply(this,arguments))}return h()(s,n),i()(s,[{key:"render",value:function(){return b.a.createElement("div",{className:"zent-progress-demo"},b.a.createElement(E.kb,{percent:70,status:"normal"}),b.a.createElement(E.kb,{percent:80,status:"success"}),b.a.createElement(E.kb,{percent:30,status:"exception"}),b.a.createElement(E.kb,{type:"circle",percent:70,status:"normal"}),b.a.createElement(E.kb,{type:"circle",percent:80,status:"success"}),b.a.createElement(E.kb,{type:"circle",percent:30,status:"exception"}))}}]),s}(y.Component);return b.a.createElement(n,null)},N=function(){var n=function(n){function s(){return r()(this,s),m()(this,v()(s).apply(this,arguments))}return h()(s,n),i()(s,[{key:"render",value:function(){return b.a.createElement("div",{className:"zent-progress-demo"},b.a.createElement(E.kb,{percent:70,showInfo:!1}),b.a.createElement(E.kb,{percent:100,showInfo:!1}),b.a.createElement(E.kb,{type:"circle",percent:70,showInfo:!1}),b.a.createElement(E.kb,{type:"circle",percent:100,showInfo:!1}))}}]),s}(y.Component);return b.a.createElement(n,null)},x=function(){var n=function(n){function s(){return r()(this,s),m()(this,v()(s).apply(this,arguments))}return h()(s,n),i()(s,[{key:"render",value:function(){return b.a.createElement("div",{className:"zent-progress-demo"},b.a.createElement(E.kb,{percent:70,format:function(n){return"Percent ".concat(n,"%")}}),b.a.createElement(E.kb,{percent:80,type:"circle",format:function(n){return"Percent ".concat(n,"%")}}))}}]),s}(y.Component);return b.a.createElement(n,null)},D=function(){var n={bgColor:"#fff",normalColor:"#38f",successColor:"#0a0",exceptionColor:"#f85"},s=function(s){function a(){return r()(this,a),m()(this,v()(a).apply(this,arguments))}return h()(a,s),i()(a,[{key:"render",value:function(){return b.a.createElement("div",{className:"zent-progress-demo"},b.a.createElement(E.kb,p()({percent:70},n)),b.a.createElement(E.kb,p()({percent:100},n)),b.a.createElement(E.kb,p()({percent:80,status:"exception"},n)),b.a.createElement(E.kb,p()({type:"circle",percent:70},n)),b.a.createElement(E.kb,p()({type:"circle",percent:100},n)),b.a.createElement(E.kb,p()({type:"circle",percent:80,status:"exception"},n)))}}]),a}(y.Component);return b.a.createElement(s,null)};function A(n){return b.a.createElement(n.tag,p()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function _(n){return b.a.createElement(A,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function S(n){return b.a.createElement(A,{tag:"style",html:n.style})}var T=function(n){function s(){var n,a;r()(this,s);for(var t=arguments.length,p=new Array(t),e=0;eProgress\n

Progress represents the current progress and status of the operation.

\n

Guides

\n\n

Demos

'}),b.a.createElement(T,{title:"Basic usage",id:"Demobasic",src:'import { Progress } from \'zent\';\n\nclass App extends Component {\n render() {\n return (\n <div className="zent-progress-demo">\n <Progress percent={70} />\n <Progress type="circle" percent={70} />\n </div>\n );\n }\n}\n\nReactDOM.render(<App />, mountNode);'},b.a.createElement(C)),b.a.createElement(T,{title:"Dynamic",id:"Demodynamic",src:'import { Progress, Button } from \'zent\';\n\nclass App extends Component {\n state = {\n value: 10,\n };\n\n increase = () => {\n let value = this.state.value + 10;\n if (value >= 100) {\n value = 100;\n }\n this.setState({ value });\n };\n\n decrease = () => {\n let value = this.state.value - 10;\n if (value < 0) {\n value = 0;\n }\n this.setState({ value });\n };\n\n render() {\n const { value } = this.state;\n return (\n <div className="zent-progress-demo">\n <Progress percent={value} />\n <Progress type="circle" percent={value} />\n <div>\n <Button onClick={this.decrease}>-</Button>\n <Button onClick={this.increase}>+</Button>\n </div>\n </div>\n );\n }\n}\n\nReactDOM.render(<App />, mountNode);'},b.a.createElement(P)),b.a.createElement(T,{title:"Custom size",id:"Demosize",src:'import { Progress } from \'zent\';\n\nclass App extends Component {\n render() {\n return (\n <div className="zent-progress-demo">\n <Progress percent={70} width={300} strokeWidth={5} />\n <Progress type="circle" percent={80} width={76} strokeWidth={5} />\n </div>\n );\n }\n}\n\nReactDOM.render(<App />, mountNode);'},b.a.createElement(z)),b.a.createElement(T,{title:"Support set status manually",id:"Demostatus",src:'import { Progress, Slider } from \'zent\';\n\nclass App extends Component {\n render() {\n return (\n <div className="zent-progress-demo">\n <Progress percent={70} status="normal" />\n <Progress percent={80} status="success" />\n <Progress percent={30} status="exception" />\n <Progress type="circle" percent={70} status="normal" />\n <Progress type="circle" percent={80} status="success" />\n <Progress type="circle" percent={30} status="exception" />\n </div>\n );\n }\n}\n\nReactDOM.render(<App />, mountNode);'},b.a.createElement(j)),b.a.createElement(T,{title:"Hide process infomation",id:"Demoinfo",src:'import { Progress, Slider } from \'zent\';\n\nclass App extends Component {\n render() {\n return (\n <div className="zent-progress-demo">\n <Progress percent={70} showInfo={false} />\n <Progress percent={100} showInfo={false} />\n <Progress type="circle" percent={70} showInfo={false} />\n <Progress type="circle" percent={100} showInfo={false} />\n </div>\n );\n }\n}\n\nReactDOM.render(<App />, mountNode);'},b.a.createElement(N)),b.a.createElement(T,{title:"Custom format function of text",id:"Demoformat",src:'import { Progress, Slider } from \'zent\';\n\nclass App extends Component {\n render() {\n return (\n <div className="zent-progress-demo">\n <Progress\n percent={70}\n format={percent => `Percent ${percent}%`}\n />\n <Progress\n percent={80}\n type="circle"\n format={percent => `Percent ${percent}%`}\n />\n </div>\n );\n }\n}\n\nReactDOM.render(<App />, mountNode);'},b.a.createElement(x)),b.a.createElement(T,{title:"Custom color of progress",id:"Democustomcolor",src:'import { Progress } from \'zent\';\n\nconst colors = {\n bgColor: \'#fff\',\n normalColor: \'#38f\',\n successColor: \'#0a0\',\n exceptionColor: \'#f85\',\n};\n\nclass App extends Component {\n render() {\n return (\n <div className="zent-progress-demo">\n <Progress percent={70} {...colors} />\n <Progress percent={100} {...colors} />\n <Progress percent={80} status="exception" {...colors} />\n <Progress type="circle" percent={70} {...colors} />\n <Progress type="circle" percent={100} {...colors} />\n <Progress type="circle" percent={80} status="exception" {...colors} />\n </div>\n );\n }\n}\n\nReactDOM.render(<App />, mountNode);'},b.a.createElement(D)),b.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\n\n\n\n\n\n\n
PropertyDescriptionTypeDefaultAlternative
classNameThe custom classnamestring
typeStyle of progessstring\'line\'\'circle\'
percentpercentage of progressnumber0
statusstatus of progress, has higher priority than percentstring\'normal\'\n \n|\n \n\'success\'\n \n|\n \n\'exception\'
showInfoWhether to show status informationbooleantruefalse
formatThe format function of text, only work on normal statusfuncbuilt-in function
strokeWidthThe width of progess bar, unit: pxnumber10
widthThe diameter of the cicrle progress bar or the length of the line progessnumber
bgColorThe color of backgroundstring
normalColorThe color in normal statestring
successColorThe color in successful state.string
exceptionColorThe color in exception statestring
'}))}}]),s}(y.Component)}}]);