Skip to content

Files

Latest commit

22244c4 · Nov 29, 2023

History

History

react-progress

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Sep 19, 2023
Nov 29, 2023
Nov 29, 2023
Aug 31, 2021

README.md

Progress 进度条

Buy me a coffee Open in unpkg NPM Downloads npm version

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

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设置圆圈进度宽带,通过widthtype="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'} -