Merge pull request #97 from ant-design/progress-bar

增加showInfo配置
This commit is contained in:
偏右 2015-07-30 18:20:54 +08:00
commit 9656efd720
4 changed files with 39 additions and 21 deletions

View File

@ -15,6 +15,7 @@ React.render(
<Progress percent="50" status="active" />
<Progress percent="70" status="exception" />
<Progress percent="100" />
<Progress percent="50" showInfo={false} />
</div>
, document.getElementById('components-progress-demo-line'));
````

View File

@ -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,7 +32,8 @@ var Line = React.createClass({
props.status = 'success';
}
var progressInfo;
var progressInfo, fullCls = '';
if(props.showInfo === true){
if (props.status === 'exception') {
progressInfo = (
<span className={prefixCls + '-line-text'}>
@ -43,13 +51,16 @@ var Line = React.createClass({
<span className={prefixCls + '-line-text'}>{props.percent}%</span>
);
}
}else {
fullCls = ' ' + prefixCls + '-line-wrap-full';
}
var persentStyle = {
width: props.percent + '%',
height: props.strokeWidth
};
return (
<div className={prefixCls + '-line-wrap clearfix status-' + props.status}>
<div className={prefixCls + '-line-wrap clearfix status-' + props.status + fullCls}>
{progressInfo}
<div className={prefixCls + '-line-outer'}>
<div className={prefixCls + '-line-inner'}>

View File

@ -33,6 +33,7 @@
| percent | 百分比 | number | 0 |
| status | 状态有两个值normal、exception、active三种状态 | string | normal |
| strokeWidth | 进度条线的宽度单位是px | number | 1 |
| showInfo | 是否显示进度数值和状态图标 | bool | true |

View File

@ -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;