@uiw/react-progress
v4.22.3
Published
Progress component
Downloads
695
Readme
Progress 进度条
用于展示操作进度,告知用户当前状态和预期。
import { Progress } from 'uiw';
const { Line, Circle } = Progress;
// or
import Progress from '@uiw/react-progress';
基本用法
import React from 'react';
import { Progress } from 'uiw';
const { Line } = Progress;
const sty = {marginBottom:10}
export default function Demo() {
return (
<div>
<Progress.Line style={sty} percent={30} />
<Line style={sty} percent={50} status="active" />
<Line style={sty} percent={70} status="exception" />
<Line style={sty} percent={100} />
<Line style={sty} percent={50} showText={false} />
</div>
);
}
进度条大小设置
设置参数strokeWidth
即可
import React from 'react';
import { Progress } from 'uiw';
const { Line } = Progress;
const sty = {marginBottom:10}
export default function Demo() {
return (
<div>
<Progress.Line style={sty} strokeWidth={6} percent={30} />
<Line style={sty} strokeWidth={14} percent={50} status="active" />
<Line style={sty} strokeWidth={18} percent={70} status="exception" />
<Line style={sty} strokeWidth={12} percent={100} />
<Line style={sty} strokeWidth={14} percent={50} showText={false} />
</div>
);
}
圆圈进度条
import React from 'react';
import { Progress } from 'uiw';
const { Circle } = Progress;
const sty = {marginBottom:10}
export default function Demo() {
return (
<div>
<Progress.Circle style={sty} percent={30} />
<Circle style={sty} percent={75} />
<Circle style={sty} percent={70} status="exception" />
<Circle style={sty} percent={100} />
</div>
);
}
不同尺寸圆圈进度条
通过strokeWidth
设置圆圈进度宽带,通过width
(type="circle"
有效)设置圆圈大小,
import React from 'react';
import { Progress } from 'uiw';
let sty = {marginRight:15}
export default function Demo() {
return (
<div>
<Progress.Circle style={sty} width={80} strokeWidth={2} percent={30} />
<Progress.Circle style={sty} width={100} strokeWidth={10} percent={75} />
<Progress.Circle style={sty} percent={70} status="exception" />
<Progress.Circle style={sty} width={100} strokeWidth={3} percent={75} />
</div>
);
}
动态展示
进度条动态展示更直观。
import React from 'react';
import { Progress } from 'uiw';
class Demo extends React.Component {
constructor(props){
super(props);
this.state = {
percent: 50,
}
}
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 });
}
render() {
let sty = {marginRight:15}
return (
<div style={{maxWidth:400}}>
<Progress.Line percent={this.state.percent} />
<Progress.Circle percent={this.state.percent} />
<div>
<button onClick={this.decline.bind(this)}>minus -</button>
<button onClick={this.increase.bind(this)}>plus +</button>
</div>
</div>
)
}
}
export default Demo;
自定义文字格式
format
属性指定格式。
import React from 'react';
import { Progress } from 'uiw';
const sty = {marginRight:10}
export default function Demo() {
return (
<div>
<Progress.Circle style={sty} percent={80} type="circle" format={percent => (
<span>
{`${percent} %`}
<div style={{padding:"10px 0 0 0",fontSize:21}}>已完成</div>
</span>
)}/>
<Progress.Circle style={sty} percent={70} status="exception" type="circle" format={percent => (
<span>
{`${percent} %`}
<div style={{padding:"10px 0 0 0",fontSize:21}}>已关闭</div>
</span>
)}/>
<Progress.Circle style={sty} percent={100} type="circle" format={percent => `已完成`}/>
<Progress.Line style={sty} percent={70} format={percent => `${percent}℃`}/>
<Progress.Line strokeWidth={18} percent={1} status="exception" />
</div>
)
}
API
| 参数 | 说明 | 类型 | 默认值 |
|------ |-------- |---------- |-------- |
| percent | 百分比 | Number | 0
|
| showText | 是否显示进度条文字内容 | Boolean | true
|
| format | 内容的模板函数,自定义文字格式。 | Function | - |
| strokeWidth | 进度条线的宽度 | Number | 6
|
| width | 圆形进度条画布宽度,单位 px ,type="circle"
有效| Number | 126
|
| status | 状态,可选:success
exception
active
| Enum{'success
', 'exception
'} | - |