From 7703b578825067cb889eac3cdde33bbde820afb0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=8F=E5=A5=88?= Date: Thu, 30 Jul 2015 16:26:42 +0800 Subject: [PATCH 1/3] transition --- style/components/progress.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/components/progress.less b/style/components/progress.less index 285962c2d7..9681af606e 100644 --- a/style/components/progress.less +++ b/style/components/progress.less @@ -23,6 +23,7 @@ &-line-bg { border-radius: 100px; background-color: @primary-color; + transition: width 0.6s ease 0s, stroke 0.6s ease } &-line-text { position: absolute; From bbac57511253f12c9e2c3c12ae2fbe158dd756fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=8F=E5=A5=88?= Date: Thu, 30 Jul 2015 17:27:41 +0800 Subject: [PATCH 2/3] =?UTF-8?q?showInfo=20=E6=98=AF=E5=90=A6=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E6=95=B0=E5=80=BC=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/progress/demo/line.md | 1 + components/progress/index.jsx | 51 +++++++++++++++++++------------- components/progress/index.md | 1 + style/components/progress.less | 6 +++- 4 files changed, 38 insertions(+), 21 deletions(-) diff --git a/components/progress/demo/line.md b/components/progress/demo/line.md index 97b49cca2a..ad51685c61 100644 --- a/components/progress/demo/line.md +++ b/components/progress/demo/line.md @@ -15,6 +15,7 @@ React.render( + , document.getElementById('components-progress-demo-line')); ```` diff --git a/components/progress/index.jsx b/components/progress/index.jsx index 0f7ad17b81..083311e7ee 100644 --- a/components/progress/index.jsx +++ b/components/progress/index.jsx @@ -11,11 +11,18 @@ const statusColorMap = { }; var Line = React.createClass({ + propTypes: { + status: React.PropTypes.oneOf(['normal', 'exception', 'active', 'success']), + showInfo: React.PropTypes.bool, + percent: React.PropTypes.number, + strokeWidth: React.PropTypes.number + }, getDefaultProps() { return { percent: 0, - strokeWidth: '10px', - status: 'normal' // exception + strokeWidth: 10, + status: 'normal', // exception active + showInfo: true }; }, render() { @@ -25,23 +32,27 @@ var Line = React.createClass({ props.status = 'success'; } - var progressInfo; - if (props.status === 'exception') { - progressInfo = ( - - - - ); - } else if (props.status === 'success') { - progressInfo = ( - - - - ); - } else { - progressInfo = ( - {props.percent}% - ); + var progressInfo, fullCls = ''; + if(props.showInfo === true){ + if (props.status === 'exception') { + progressInfo = ( + + + + ); + } else if (props.status === 'success') { + progressInfo = ( + + + + ); + } else { + progressInfo = ( + {props.percent}% + ); + } + }else { + fullCls = ' ' + prefixCls + '-line-wrap-full'; } var persentStyle = { width: props.percent + '%', @@ -49,7 +60,7 @@ var Line = React.createClass({ }; return ( -
+
{progressInfo}
diff --git a/components/progress/index.md b/components/progress/index.md index c6e5a2239e..3e89723354 100644 --- a/components/progress/index.md +++ b/components/progress/index.md @@ -33,6 +33,7 @@ | percent | 百分比 | number | 0 | | status | 状态,有两个值normal、exception、active三种状态 | string | normal | | strokeWidth | 进度条线的宽度,单位是px | number | 1 | +| showInfo | 是否显示进度数值和状态图标 | bool | true | diff --git a/style/components/progress.less b/style/components/progress.less index 9681af606e..0332a431f3 100644 --- a/style/components/progress.less +++ b/style/components/progress.less @@ -13,12 +13,16 @@ &-line-outer { margin-right: 45px; } + &-line-wrap-full { + .@{prefixProgressClass}-line-outer { + margin-right: 0; + } + } &-line-inner { display: inline-block; width: 100%; background-color: #E9E9E9; border-radius: 100px; - margin-right: 45px; } &-line-bg { border-radius: 100px; From fc9e268cfa9ebe5368ff445761a36fb3152eb4d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=8F=E5=A5=88?= Date: Thu, 30 Jul 2015 18:19:56 +0800 Subject: [PATCH 3/3] =?UTF-8?q?showInfo=20=E6=98=AF=E5=90=A6=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E6=95=B0=E5=80=BC=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/components/progress.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/components/progress.less b/style/components/progress.less index 0332a431f3..68aaab71ff 100644 --- a/style/components/progress.less +++ b/style/components/progress.less @@ -27,7 +27,7 @@ &-line-bg { border-radius: 100px; background-color: @primary-color; - transition: width 0.6s ease 0s, stroke 0.6s ease + transition: width 0.6s ease 0s, stroke 0.6s ease; } &-line-text { position: absolute;