Progress 进度条

用于展示操作进度，告知用户当前状态和预期。

import { Progress } from 'uiw';
const { Line, Circle } = Progress;
// or
import Progress from '@uiw/react-progress'; 

基本用法

import ReactDOM from 'react-dom';
import { Progress } from 'uiw';

const { Line } = Progress;
const sty = {marginBottom:10}
const Demo = () => (
  <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>
);
ReactDOM.render(<Demo />, _mount_);

进度条大小设置

设置参数strokeWidth即可

import ReactDOM from 'react-dom';
import { Progress } from 'uiw';

const { Line } = Progress;
const sty = {marginBottom:10}
const Demo = () => (
  <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>
);
ReactDOM.render(<Demo />, _mount_);

圆圈进度条

import ReactDOM from 'react-dom';
import { Progress } from 'uiw';

const { Circle } = Progress;
const sty = {marginBottom:10}
const Demo = () => (
  <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>
);
ReactDOM.render(<Demo />, _mount_);

不同尺寸圆圈进度条

通过strokeWidth设置圆圈进度宽带，通过width（type="circle"有效）设置圆圈大小，

import ReactDOM from 'react-dom';
import { Progress } from 'uiw';

let sty = {marginRight:15}
const Demo = () => (
  <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>
);
ReactDOM.render(<Demo />, _mount_);

动态展示

进度条动态展示更直观。

import React from 'react';
import ReactDOM from 'react-dom';
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>
    )
  }
}
ReactDOM.render(<Demo />, _mount_);

自定义文字格式

format 属性指定格式。

import React from 'react';
import ReactDOM from 'react-dom';
import { Progress } from 'uiw';

const sty = {marginRight:10}
class Demo extends React.Component {
  render() {
    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}℃`}/>
      </div>
    )
  }
}
ReactDOM.render(<Demo />, _mount_);

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'}	-