ant-design/components/progress/demo/circle-dynamic.md

55 lines
1.0 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 4
2016-07-26 15:42:04 +08:00
title:
zh-CN: 进度圈动态展示
en-US: Dynamic circular progress bar
2016-03-31 09:40:55 +08:00
---
2015-06-15 16:31:51 +08:00
2016-07-26 15:42:04 +08:00
## zh-CN
2015-06-15 16:31:51 +08:00
会动的进度条才是好进度条。
2016-07-26 15:42:04 +08:00
## en-US
A dynamic progress bar is better.
2017-01-19 15:19:03 +08:00
````__react
import { Progress, Button } from 'antd';
2015-11-03 14:25:36 +08:00
const ButtonGroup = Button.Group;
2015-06-15 16:31:51 +08:00
const MyProgress = React.createClass({
2015-06-15 16:31:51 +08:00
getInitialState() {
return {
2016-05-11 09:32:33 +08:00
percent: 0,
2015-06-15 16:31:51 +08:00
};
},
2015-09-22 20:11:28 +08:00
increase() {
let percent = this.state.percent + 10;
if (percent > 100) {
percent = 100;
}
this.setState({ percent });
},
decline() {
let percent = this.state.percent - 10;
if (percent < 0) {
percent = 0;
}
this.setState({ percent });
2015-06-15 16:31:51 +08:00
},
render() {
return (
<div>
2016-04-05 16:51:26 +08:00
<Progress type="circle" percent={this.state.percent} />
<ButtonGroup>
<Button type="ghost" onClick={this.decline} icon="minus" />
<Button type="ghost" onClick={this.increase} icon="plus" />
</ButtonGroup>
</div>
);
2016-05-11 09:32:33 +08:00
},
2015-06-15 16:31:51 +08:00
});
ReactDOM.render(<MyProgress />, mountNode);
2015-06-15 16:31:51 +08:00
````