mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
dynamic demo
This commit is contained in:
parent
15027544ef
commit
e59a6b2430
38
components/progress/demo/circle-dynamic.md
Normal file
38
components/progress/demo/circle-dynamic.md
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
# 动态展示
|
||||||
|
|
||||||
|
- order: 4
|
||||||
|
|
||||||
|
会动的进度条才是好进度条。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
````jsx
|
||||||
|
var ProgressCircle = antd.Progress.Circle;
|
||||||
|
|
||||||
|
var MyProgress = React.createClass({
|
||||||
|
getInitialState() {
|
||||||
|
return {
|
||||||
|
percent: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
componentDidMount: function() {
|
||||||
|
var self = this;
|
||||||
|
setInterval(function() {
|
||||||
|
if (self.state.percent < 100) {
|
||||||
|
self.state.percent += 2;
|
||||||
|
}
|
||||||
|
self.setState({
|
||||||
|
percent: self.state.percent
|
||||||
|
});
|
||||||
|
}, 100);
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
return <ProgressCircle percent={this.state.percent} />;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
React.render(
|
||||||
|
<MyProgress />
|
||||||
|
, document.getElementById('components-progress-demo-circle-dynamic'));
|
||||||
|
````
|
||||||
|
|
@ -27,7 +27,7 @@ var MyProgress = React.createClass({
|
|||||||
}, 100);
|
}, 100);
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
return <Progress percent={this.state.percent} width="300" strokeWidth="3" />;
|
return <Progress percent={this.state.percent} />;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -103,7 +103,7 @@ var Circle = React.createClass({
|
|||||||
<i className='anticon anticon-exclamation'></i>
|
<i className='anticon anticon-exclamation'></i>
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}else if(this.props.status === 'suucess'){
|
}else if(this.props.status === 'success'){
|
||||||
progressInfo = (
|
progressInfo = (
|
||||||
<span style={textStyle} className='ant-progress-circle-text'>
|
<span style={textStyle} className='ant-progress-circle-text'>
|
||||||
<i className="anticon anticon-check"></i>
|
<i className="anticon anticon-check"></i>
|
||||||
|
Loading…
Reference in New Issue
Block a user