From 331443419ca5a82c2eede9bd5d6ccd3de02892b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=8F=E5=A5=88?= Date: Mon, 15 Jun 2015 16:16:51 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/progress/demo/circle.md | 6 +++--- components/progress/demo/line.md | 6 +++--- components/progress/index.jsx | 24 +++++++++++++++++------- style/components/progress.less | 10 +++++++--- 4 files changed, 30 insertions(+), 16 deletions(-) diff --git a/components/progress/demo/circle.md b/components/progress/demo/circle.md index 7ef2562cd4..02ae6cd8ba 100644 --- a/components/progress/demo/circle.md +++ b/components/progress/demo/circle.md @@ -11,9 +11,9 @@ var Circle = antd.Progress.Circle; React.render(
- - - + + +
, document.getElementById('components-progress-demo-circle')); ```` diff --git a/components/progress/demo/line.md b/components/progress/demo/line.md index 8acf417078..29c0fc09d2 100644 --- a/components/progress/demo/line.md +++ b/components/progress/demo/line.md @@ -11,9 +11,9 @@ var Line = antd.Progress.Line; React.render(
- - - + + +
, document.getElementById('components-progress-demo-line')); ```` diff --git a/components/progress/index.jsx b/components/progress/index.jsx index 1109a31558..1c73d6b2be 100644 --- a/components/progress/index.jsx +++ b/components/progress/index.jsx @@ -7,8 +7,9 @@ var React = require('react'); var Line = React.createClass({ getDefaultProps: function () { return { + width: 300, percent: 0, - strokeWidth: 4, + strokeWidth: 3, status: 'normal' // exception }; }, @@ -26,8 +27,9 @@ var Line = React.createClass({ var style = { 'width': this.props.width }; - var wrapStyle = { - 'font-size': this.props.width / 100 * this.props.strokeWidth + var fontSize = (this.props.width / 100 * this.props.strokeWidth); + var iconStyle = { + 'font-size': (fontSize < 14) ? 14 : fontSize }; var textStyle = { 'color': statusColorMap[this.props.status] @@ -36,13 +38,14 @@ var Line = React.createClass({ if (this.props.status === 'exception') { progressInfo = ( - + ); + } else if(this.props.status === 'success'){ progressInfo = ( - + ); }else { @@ -52,7 +55,7 @@ var Line = React.createClass({ } return ( -
+
@@ -66,6 +69,7 @@ var Line = React.createClass({ var Circle = React.createClass({ getDefaultProps: function () { return { + width: 150, percent: 0, strokeWidth: 4, status: 'normal' // exception @@ -87,7 +91,7 @@ var Circle = React.createClass({ 'height': this.props.width }; var wrapStyle = { - 'font-size': this.props.width * 0.3 + 'font-size': this.props.width * 0.2 }; var textStyle = { 'color': statusColorMap[this.props.status] @@ -99,6 +103,12 @@ var Circle = React.createClass({ ); + }else if(this.props.status === 'suucess'){ + progressInfo = ( + + + + ); }else { progressInfo = ( {this.props.percent}% diff --git a/style/components/progress.less b/style/components/progress.less index b523f53ab2..0e8e1f9320 100644 --- a/style/components/progress.less +++ b/style/components/progress.less @@ -5,6 +5,10 @@ &-circle-wrap { display: inline-block; } + + &-line-wrap { + font-size: 12px; + } &-line-inner { display: inline-block; @@ -20,7 +24,7 @@ line-height: 1; .anticon { - font-size: 1.5em; + font-size: 1.2em; } } @@ -35,11 +39,11 @@ width: 100%; text-align: center; line-height: 1; - top: 33%; + top: 38%; left: 0; .anticon { - font-size: 1em; + font-size: 14/12em; } } } From e0dfb9d51eee015fc62a44ebdad16feba928095e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=8F=E5=A5=88?= Date: Mon, 15 Jun 2015 16:26:44 +0800 Subject: [PATCH 2/3] confilct --- components/progress/demo/line.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/components/progress/demo/line.md b/components/progress/demo/line.md index 87df9640ea..90895477a6 100644 --- a/components/progress/demo/line.md +++ b/components/progress/demo/line.md @@ -11,9 +11,6 @@ var Progress = antd.Progress.Line; React.render(
- - - From e59a6b243026bd22fbde41c667162e1c3ba49ef9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=8F=E5=A5=88?= Date: Mon, 15 Jun 2015 16:31:51 +0800 Subject: [PATCH 3/3] dynamic demo --- components/progress/demo/circle-dynamic.md | 38 ++++++++++++++++++++++ components/progress/demo/dynamic.md | 2 +- components/progress/index.jsx | 2 +- 3 files changed, 40 insertions(+), 2 deletions(-) create mode 100644 components/progress/demo/circle-dynamic.md diff --git a/components/progress/demo/circle-dynamic.md b/components/progress/demo/circle-dynamic.md new file mode 100644 index 0000000000..f2865b1326 --- /dev/null +++ b/components/progress/demo/circle-dynamic.md @@ -0,0 +1,38 @@ +# 动态展示 + +- order: 4 + +会动的进度条才是好进度条。 + +--- + +````jsx +var ProgressCircle = antd.Progress.Circle; + +var MyProgress = React.createClass({ + getInitialState() { + return { + percent: 0 + }; + }, + componentDidMount: function() { + var self = this; + setInterval(function() { + if (self.state.percent < 100) { + self.state.percent += 2; + } + self.setState({ + percent: self.state.percent + }); + }, 100); + }, + render() { + return ; + } +}); + +React.render( + + , document.getElementById('components-progress-demo-circle-dynamic')); +```` + diff --git a/components/progress/demo/dynamic.md b/components/progress/demo/dynamic.md index 766b5d7abc..0c45dc6bcf 100644 --- a/components/progress/demo/dynamic.md +++ b/components/progress/demo/dynamic.md @@ -27,7 +27,7 @@ var MyProgress = React.createClass({ }, 100); }, render() { - return ; + return ; } }); diff --git a/components/progress/index.jsx b/components/progress/index.jsx index 1c73d6b2be..3176f7951e 100644 --- a/components/progress/index.jsx +++ b/components/progress/index.jsx @@ -103,7 +103,7 @@ var Circle = React.createClass({ ); - }else if(this.props.status === 'suucess'){ + }else if(this.props.status === 'success'){ progressInfo = (