Progress component
npm install @uiw/react-progressProgress 进度条
===
用于展示操作进度，告知用户当前状态和预期。
``jsx`
import { Progress } from 'uiw';
const { Line, Circle } = Progress;
// or
import Progress from '@uiw/react-progress';
`jsx mdx:preview&bg=#fff
import React from 'react';
import { Progress } from 'uiw';
const { Line } = Progress;
const sty = {marginBottom:10}
export default function Demo() {
return (
$3
设置参数
即可`jsx mdx:preview&bg=#fff
import React from 'react';
import { Progress } from 'uiw';const { Line } = Progress;
const sty = {marginBottom:10}
export default function Demo() {
return (
);
}
`$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { Progress } from 'uiw';const { Circle } = Progress;
const sty = {marginBottom:10}
export default function Demo() {
return (
);
}
`$3
通过
设置圆圈进度宽带，通过width（type="circle"有效）设置圆圈大小，`jsx mdx:preview&bg=#fff
import React from 'react';
import { Progress } from 'uiw';let sty = {marginRight:15}
export default function Demo() {
return (
);
}
`$3
进度条动态展示更直观。
jsx mdx:preview&bg=#fff
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 (
)
}
}export default Demo;
`自定义文字格式
属性指定格式。`jsx mdx:preview&bg=#fff
import React from 'react';
import { Progress } from 'uiw';const sty = {marginRight:10}
export default function Demo() {
return (
(
{${percent} %}
已完成
)}/>
(
{${percent} %}
已关闭
)}/>
已完成}/>
${percent}℃}/>
)
}
`
API
| 参数 | 说明 | 类型 | 默认值 |
|------ |-------- |---------- |-------- |
| percent | 百分比 | Number |
|
| showText | 是否显示进度条文字内容 | Boolean | true |
| format | 内容的模板函数，自定义文字格式。 | Function | - |
| strokeWidth | 进度条线的宽度 | Number | 6 |
| width | 圆形进度条画布宽度，单位 px ,type="circle"有效| Number | 126 |
| status | 状态，可选：success exception active | Enum{'success', 'exception`'} | - |