diff --git a/components/progress/demo/line-mini.md b/components/progress/demo/line-mini.md index 453bbb9441604e6ae98106cd2b29bf3f9d672d7b..0a4851425dc742790f1d4fca8adb3e30c426bfec 100644 --- a/components/progress/demo/line-mini.md +++ b/components/progress/demo/line-mini.md @@ -8,9 +8,12 @@ ````jsx var Progress = antd.Progress.Line; +var style = { + width: "170px" +} React.render( -
+
diff --git a/components/progress/index.jsx b/components/progress/index.jsx index b1443e9bc8fe5c8f85227272762fc2a9328b7103..59fdbafb54fc5a827b51e7b719e0c1ed7b937b64 100644 --- a/components/progress/index.jsx +++ b/components/progress/index.jsx @@ -11,14 +11,6 @@ const statusColorMap = { }; var Line = React.createClass({ - propTypes: { - percent: function(props, propName){ - if ( props[propName] < 0 && props[propName] > 100) { - return new Error('Validation failed!'); - } - }, - strokeWidth: React.PropTypes.string - }, getDefaultProps() { return { percent: 0, @@ -87,24 +79,20 @@ var Circle = React.createClass({ var style = { 'width': props.width, - 'height': props.width - }; - var wrapStyle = { + 'height': props.width, 'fontSize': props.width * 0.16 + 6 - }; - var textStyle = { - 'color': statusColorMap[props.status] + }; var progressInfo; if (props.status === 'exception') { progressInfo = ( - + ); } else if (props.status === 'success') { progressInfo = ( - + ); @@ -115,7 +103,7 @@ var Circle = React.createClass({ } return ( -
+
diff --git a/style/components/progress.less b/style/components/progress.less index 3b6ea07749a9c311b8e4b61266cb14267240d311..422e3081c3bdb296a84742676df726dfc1eacfeb 100644 --- a/style/components/progress.less +++ b/style/components/progress.less @@ -4,6 +4,10 @@ @statusSuccess: #85D262; .@{prefixProgressClass} { + &-line-wrap, + &-circle-wrap { + display: inline-block; + } &-line-wrap { width: 100%; font-size: 12px; @@ -72,4 +76,14 @@ font-size: 14/12em; } } + &-circle-wrap.status-exception { + .@{prefixProgressClass}-circle-text { + color: @statusException; + } + } + &-circle-wrap.status-success { + .@{prefixProgressClass}-circle-text { + color: @statusSuccess; + } + } }