cr vc-progress
parent
89601b5b8c
commit
b6a7f49c0d
|
@ -17,6 +17,7 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
|
const { percent, color } = this;
|
||||||
const containerStyle = {
|
const containerStyle = {
|
||||||
width: '250px',
|
width: '250px',
|
||||||
};
|
};
|
||||||
|
@ -27,22 +28,22 @@ export default {
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<h3>Line Progress {this.percent}%</h3>
|
<h3>Line Progress {percent}%</h3>
|
||||||
<div style={containerStyle}>
|
<div style={containerStyle}>
|
||||||
<Line percent={this.percent} strokeWidth="4" strokeColor={this.color} />
|
<Line percent={percent} strokeWidth="4" strokeColor={color} />
|
||||||
<Line
|
<Line
|
||||||
percent={[this.percent / 2, this.percent / 2]}
|
percent={[percent / 2, percent / 2]}
|
||||||
strokeWidth="4"
|
strokeWidth="4"
|
||||||
strokeColor={[this.color, '#CCC']}
|
strokeColor={[color, '#CCC']}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<h3>Circle Progress {this.percent}%</h3>
|
<h3>Circle Progress {percent}%</h3>
|
||||||
<div style={circleContainerStyle}>
|
<div style={circleContainerStyle}>
|
||||||
<Circle
|
<Circle
|
||||||
percent={this.percent}
|
percent={percent}
|
||||||
strokeWidth="6"
|
strokeWidth="6"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeColor={this.color}
|
strokeColor={color}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<p>
|
||||||
|
|
Loading…
Reference in New Issue