Progress

Example
基本进度条
圆形进度条
尺寸
进度条不同状态
Progressive
颜色
动态展示
自定义百分比信息
API

展示操作的当前进度。

何时使用 #

在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。

操作在后台运行，需要耗费一定的客户端等待时间。
操作需要展示一个完成进度的百分比。

代码演示 #

基本进度条 #

普通模式的进度条，通过 percent 属性指定进度，通过 textRender 控制右侧文本信息的展示，通过 hasBorder 属性设置组件是否包含边框。

圆形进度条 #

通过 shape 属性可以改变进度指示器的外观，当取值为 circle 时为圆形进度条。

尺寸 #

可以通过 size 属性制定进度条的大小。

进度条不同状态 #

用户可以通过 state 属性自定义当前进度的展现状态，可取值为 normal, success, error 分别表示普通、成功、失败这三种状态。

Progressive #

当开启 progressive 模式时，Progress 组件会根据自身的进度自动设置展现的颜色值。注意，此时会忽略用户设置的 state 的属性值。

颜色 #

通过 color 属性可以改变进度条的颜色。Progress 有三个API可以改变进度条的颜色,其优先级为 color > progressive > state。

动态展示 #

此时为增强模式的进度条，会根据当前进度展示不同的样式。注: css animation完成需要时间, 数据调整过于频繁会导致显示延迟。

import React from 'react';
import ReactDOM from 'react-dom';
import { Progress, Button, Icon } from '@alifd/next';
class CustomProgress extends React.Component {
  constructor() {
    super(...arguments);
    this.state = { percent: 0 };
    this.addProgress = () => {
      this.setState(prevState => {
        return {
          percent: prevState.percent + 10,
        };
      });
    };
    this.minusProgress = () => {
      this.setState(prevState => {
        return {
          percent: prevState.percent - 10,
        };
      });
    };
  }
  render() {
    const state = this.state;
    return (
      <div>
        <div className="progress-panel">
          <Button.Group>
            <Button onClick={this.minusProgress} disabled={state.percent === 0}>
              <Icon type="minus" />
            </Button>
            <Button onClick={this.addProgress} disabled={state.percent === 100}>
              <Icon type="add" />
            </Button>
          </Button.Group>
        </div>
        <Progress percent={state.percent} progressive size="large" />
        <br />
        <br />
        <Progress percent={state.percent} progressive shape="circle" size="large" />
      </div>
    );
  }
}
ReactDOM.render(<CustomProgress />, mountNode);

自定义百分比信息 #

textRender 控制百分比信息的展示,通过自定义textRender个性化百分比渲染. 下面给一个百分比进度取2位,当达到100%是显示Icon的progressbar.

API #

Progress #

参数	说明	类型	默认值
shape	形态	'circle' \| 'line'	'line'
size	尺寸	'small' \| 'medium' \| 'large'	'medium'
percent	所占百分比	number	0
state	进度状态, 显示优先级: color > progressive > state	'normal' \| 'success' \| 'error'	'normal'
progressive	是否为色彩阶段变化模式, 显示优先级: color > progressive > state	boolean	false
hasBorder	是否添加 Border（只适用于 Line Progress)	boolean	false
textRender	文本渲染函数签名: 参数: percent: 当前的进度信息 option: 额外的参数返回值: 文本节点	(percent: number, option?: {rtl?: boolean}) => React.ReactNode	percent => `${Math.floor(percent)}%`
color	进度条颜色, 显示优先级: color > progressive > state	string	-
backgroundColor	背景色	string	-