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/circle.md b/components/progress/demo/circle.md index 1dd47b1d84..34a82317c1 100644 --- a/components/progress/demo/circle.md +++ b/components/progress/demo/circle.md @@ -11,9 +11,9 @@ var ProgressCircle = antd.Progress.Circle; React.render(
- - - + + +
, document.getElementById('components-progress-demo-circle')); ```` 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/demo/line.md b/components/progress/demo/line.md index 2616448684..90895477a6 100644 --- a/components/progress/demo/line.md +++ b/components/progress/demo/line.md @@ -11,9 +11,9 @@ var Progress = 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..3176f7951e 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 === 'success'){ + 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; } } }