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

53 lines
1.0 KiB
Markdown
Raw Normal View History

2015-06-15 16:49:37 +08:00
# 进度圈动态展示
2015-06-15 16:31:51 +08:00
- order: 4
会动的进度条才是好进度条。
---
````jsx
2015-11-03 14:25:36 +08:00
import { Progress, Button, Icon } from 'antd';
const ProgressCircle = Progress.Circle;
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 {
percent: 0
};
},
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>
<ProgressCircle percent={this.state.percent} />
<ButtonGroup>
<Button type="ghost" onClick={this.decline}>
<Icon type="minus" />
</Button>
<Button type="ghost" onClick={this.increase}>
<Icon type="plus" />
</Button>
</ButtonGroup>
</div>
);
2015-06-15 16:31:51 +08:00
}
});
ReactDOM.render(<MyProgress />, mountNode);
2015-06-15 16:31:51 +08:00
````