mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

Add props format for progress

Browse Source
This commit is contained in:
afc163 2015-11-19 13:42:10 +08:00
parent 07aef080fb
commit 9aaeb14fba
7 changed files with 38 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/progress/demo/circle-mini.md
View File

@ -7,13 +7,13 @@
---
````jsx
import { Progress } from 'antd';
import { Progress, Icon } from 'antd';
const ProgressCircle = Progress.Circle;
ReactDOM.render(
<div>
<ProgressCircle percent={30} width={80} />
<ProgressCircle percent={70} width={80} status="exception" />
<ProgressCircle percent={70} width={80} status="exception" format={<Icon type="exclamation" />} />
<ProgressCircle percent={100} width={80} />
</div>
, document.getElementById('components-progress-demo-circle-mini'));

4
components/progress/demo/circle.md
View File

@ -7,13 +7,13 @@
---
````jsx
import { Progress } from 'antd';
import { Progress, Icon } from 'antd';
const ProgressCircle = Progress.Circle;
ReactDOM.render(
<div>
<ProgressCircle percent={30} />
<ProgressCircle percent={70} status="exception" />
<ProgressCircle percent={70} status="exception" format={<Icon type="exclamation" />} />
<ProgressCircle percent={100} />
</div>
, document.getElementById('components-progress-demo-circle'));

4
components/progress/demo/line-mini.md
View File

@ -7,14 +7,14 @@
---
````jsx
import { Progress } from 'antd';
import { Progress, Icon } from 'antd';
const ProgressLine = Progress.Line;
ReactDOM.render(
<div style={{ width: 170 }}>
<ProgressLine percent={30} strokeWidth={5} />
<ProgressLine percent={50} strokeWidth={5} status="active" />
<ProgressLine percent={70} strokeWidth={5} status="exception" />
<ProgressLine percent={70} strokeWidth={5} status="exception" format={<Icon type="exclamation" />} />
<ProgressLine percent={100} strokeWidth={5} />
</div>
, document.getElementById('components-progress-demo-line-mini'));

4
components/progress/demo/line.md
View File

@ -7,14 +7,14 @@
---
````jsx
import { Progress } from 'antd';
import { Progress, Icon } from 'antd';
const ProgressLine = Progress.Line;
ReactDOM.render(
<div>
<ProgressLine percent={30} />
<ProgressLine percent={50} status="active" />
<ProgressLine percent={70} status="exception" />
<ProgressLine percent={70} status="exception" format={<Icon type="exclamation" />} />
<ProgressLine percent={100} />
<ProgressLine percent={50} showInfo={false} />
</div>

29
components/progress/index.jsx
View File

@ -16,14 +16,15 @@ let Line = React.createClass({
status: React.PropTypes.oneOf(['normal', 'exception', 'active', 'success']),
showInfo: React.PropTypes.bool,
percent: React.PropTypes.number,
strokeWidth: React.PropTypes.number
strokeWidth: React.PropTypes.number,
},
getDefaultProps() {
return {
percent: 0,
strokeWidth: 10,
status: 'normal', // exception active
showInfo: true
format: '${percent}%',
showInfo: true,
};
},
render() {
@ -35,22 +36,23 @@ let Line = React.createClass({
let progressInfo;
let fullCls = '';
const text = (typeof props.format === 'string') ?
props.format.replace('${percent}', props.percent) : props.format;
if(props.showInfo === true){
if (props.status === 'exception') {
progressInfo = (
<span className={prefixCls + '-line-text'}>
<Icon type="exclamation-circle" />
</span>
<span className={prefixCls + '-line-text'}>{text}</span>
);
} else if (props.status === 'success') {
progressInfo = (
<span className={prefixCls + '-line-text'}>
<Icon type="exclamation-circle" />
<Icon type="check" />
</span>
);
} else {
progressInfo = (
<span className={prefixCls + '-line-text'}>{props.percent}%</span>
<span className={prefixCls + '-line-text'}>{text}</span>
);
}
} else {
@ -79,14 +81,15 @@ let Circle = React.createClass({
status: React.PropTypes.oneOf(['normal', 'exception', 'success']),
percent: React.PropTypes.number,
strokeWidth: React.PropTypes.number,
width: React.PropTypes.number
width: React.PropTypes.number,
},
getDefaultProps: function () {
return {
width: 132,
percent: 0,
strokeWidth: 6,
status: 'normal' // exception
format: '${percent}%',
status: 'normal', // exception
};
},
render() {
@ -102,11 +105,11 @@ let Circle = React.createClass({
'fontSize': props.width * 0.16 + 6
};
let progressInfo;
const text = (typeof props.format === 'string') ?
props.format.replace('${percent}', props.percent) : props.format;
if (props.status === 'exception') {
progressInfo = (
<span className={prefixCls + '-circle-text'}>
<Icon type="exclamation" />
</span>
<span className={prefixCls + '-circle-text'}>{text}</span>
);
} else if (props.status === 'success') {
progressInfo = (
@ -116,7 +119,7 @@ let Circle = React.createClass({
);
} else {
progressInfo = (
<span className={prefixCls + '-circle-text'}>{props.percent}%</span>
<span className={prefixCls + '-circle-text'}>{text}</span>
);
}

22
components/progress/index.md
View File

@ -19,18 +19,20 @@
## Progress Line
| 参数 | 说明 | 类型 | 默认值 |
|----------|---------------|----------|-------------|
| percent | 百分比 | number | 0 |
| status | 状态，有两个值normal、exception、active三种状态 | string | normal |
| strokeWidth | 进度条线的宽度，单位是px | number | 1 |
| showInfo | 是否显示进度数值和状态图标 | bool | true |
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|---------------|
| percent | 百分比 | number | 0 |
| format | 数字的模板 | string | "${percent}%" |
| status | 状态，可选：normal、exception、active | string | normal |
| strokeWidth | 进度条线的宽度，单位是px | number | 1 |
| showInfo | 是否显示进度数值和状态图标 | bool | true |
### Progress Circle
| 参数 | 说明 | 类型 | 默认值 |
|----------|---------------|----------|-------------|
| percent | 百分比 | number | 0 |
| status | 状态，有两个值normal、exception | string | normal |
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|---------------|
| percent | 百分比 | number | 0 |
| format | 数字的模板 | string | "${percent}%" |
| status | 状态，可选：normal、exception | string | normal |
| strokeWidth | 进度条线的宽度，单位是进度条画布宽度的百分比 | number | 1 |
| width | 必填，进度条画布宽度，单位px。这里没有提供height属性设置，Line型高度就是strokeWidth，Circle型高度等于width | number | null |

3
style/components/progress.less
View File

@ -32,7 +32,7 @@
}
&-line-text {
position: absolute;
bottom: 0;
top: 0;
right: 0;
width: 35px;
text-align: left;
@ -40,6 +40,7 @@
margin-left: 10px;
.anticon {
font-weight: bold;
font-size: 12px;
}
}