1.0.1 • Published 5 years ago
gogolee-react-progress-circle v1.0.1
介绍
一个基于React的简单的显示进度条环形动画的库。
安装
yarn add gogolee-react-progress-circle
用法
import React from 'react'
import { render } from 'react-dom'
import Progress from 'gogolee-react-progress-circle';
import 'gogolee-react-progress-circle/lib/main.css';
const App = () => {
return (
<div style={{width: 300, heihgt: 300, margin: '0 auto'}}>
<h4>默认用法</h4>
<Progress number={20} width={100} height={100}/>
<hr/>
<h4>显示自定义文本</h4>
<Progress number={30} width={100} height={100} isTextShown={false}>
<div style={{color: 'lightpink'}}>
hey yo~
</div>
</Progress>
</div>
);
}
render(<App />, document.getElementById('root'))Options
| 属性 | 描述 |
|---|---|
| number | 必填, number类型，表示当前进度条百分比，取值为0到100 |
| width | 可选, number类型，环形图宽度， 默认100px |
| height | 可选, number类型，环形图高度， 默认100px |
| isTextShown | 可选, boolean类型， 表示是否希望环形图显示百分比值，默认为true，即显示 |
| strokeColor | 可选， string类型，表示环形图的颜色，默认#5116d0 |
用法
<h4>默认用法</h4>
<Progress number={20} />
<hr/>
<h4>设置stroke颜色</h4>
<Progress number={20} strokeColor="red" />
<hr/>
<h4>设置大小</h4>
<Progress number={40} strokeColor="red" width={50} height={50}/>
<hr />
<h4>隐藏百分比数字</h4>
<Progress number={40} isTextShown={false} />
<hr />
<h4>显示自定义文本</h4>
<Progress number={30} isTextShown={false}>
<div style={{color: 'lightpink'}}>
hey yo~
</div>
</Progress>