@uiw/react-progress
TypeScript icon, indicating that this package has built-in type declarations

4.22.3 • Public • Published

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

Package Sidebar

Install

npm i @uiw/react-progress

Weekly Downloads

113

Version

4.22.3

License

MIT

Unpacked Size

47.1 kB

Total Files

35

Last publish

Collaborators

  • uiwjs
  • wcjiang