Package Exports

@uiw/react-progress
@uiw/react-progress/cjs/index.js
@uiw/react-progress/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw/react-progress) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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