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 285962c2d7..68aaab71ff 100644 --- a/style/components/progress.less +++ b/style/components/progress.less @@ -13,16 +13,21 @@ &-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; background-color: @primary-color; + transition: width 0.6s ease 0s, stroke 0.6s ease; } &-line-text { position: absolute;