Progress 进度指示器

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

Guide

展示操作的当前进度。

何时使用

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

• 操作在后台运行，需要耗费一定的客户端等待时间。

• 操作需要展示一个完成进度的百分比。

API

Progress

代码示例

基本进度条

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

查看源码在线预览

import { Progress } from '@alifd/next';
ReactDOM.render(<div>
    <Progress percent={30} textRender={() => ''} />
    <Progress percent={50} />
    <Progress percent={90} />
    <Progress percent={40} />
    <Progress percent={40} hasBorder size="large" />
</div>, mountNode);

圆形进度条

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

查看源码在线预览

import { Progress, Icon } from '@alifd/next';
ReactDOM.render(<div>
    <Progress percent={30} shape="circle" /> &nbsp;&nbsp;
    <Progress percent={50} shape="circle" /> &nbsp;&nbsp;
    <Progress percent={80} shape="circle" textRender={() => ''}/>&nbsp;&nbsp;
    <Progress percent={100} shape="circle" textRender={() => <Icon type="select" size="xl" />} />
</div>, mountNode);

尺寸

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

查看源码在线预览

import { Progress } from '@alifd/next';
ReactDOM.render(<div>
    <Progress percent={30} size="small" />
    <Progress percent={50} size="medium" />
    <Progress percent={90} size="large" />
    <br />
    <Progress percent={30} size="small" shape="circle" /> &nbsp;&nbsp;
    <Progress percent={50} size="medium" shape="circle" /> &nbsp;&nbsp;
    <Progress percent={90} size="large" shape="circle" />
</div>, mountNode);

进度条不同状态

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

查看源码在线预览

import { Progress } from '@alifd/next';
ReactDOM.render(<div className="">
    <Progress percent={20} shape="circle" state="normal" className="custom-progress" />
    <Progress percent={95} shape="circle" state="success" className="custom-progress" />
    <Progress percent={95} shape="circle" state="error" className="custom-progress" />
</div>, mountNode);

.custom-progress {
    margin: 0 20px;
}

Progressive

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

查看源码在线预览

import { Progress } from '@alifd/next';
ReactDOM.render(<div>
    <Progress percent={20} progressive />
    <Progress percent={60} progressive />
    <Progress percent={90} progressive />
</div>, mountNode);

颜色

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

查看源码在线预览

import { Progress, Icon } from '@alifd/next';
ReactDOM.render(<div>
    <Progress percent={30} shape="circle" color="#AF5F3C"/> &nbsp;&nbsp;&nbsp;&nbsp;
    <Progress percent={50} shape="circle"/>&nbsp;&nbsp;&nbsp;&nbsp;
    <Progress percent={90} shape="circle" color="rgba(119,66,141, 0.9)" textRender={() => <Icon type="select" size="xl" />} />
    <br /><br />
    <Progress percent={30} shape="line" color="rgb(208,16,76)"/>
    <Progress percent={50} shape="line"/>
    <Progress percent={90} shape="line" color="blue" textRender={() => <Icon type="select" size="medium" />} />
</div>, mountNode);

动态展示

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

查看源码在线预览

import { Progress, Button, Icon } from '@alifd/next';
class CustomProgress extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            percent: 0
        };
    }
    addProgress = () => {
        this.setState(prevState => {
            return {
                percent: prevState.percent + 10
            };
        });
    }
    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);

.progress-panel {
    display: flex;
    margin-bottom: 14px;
}
.custom-select {
    margin-right: 20px;
}

自定义百分比信息

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

查看源码在线预览

import { Progress, Icon } from '@alifd/next';
const textRender = percent => {
    if (percent === 100) {
        return <Icon type="select" size="medium" />;
    }
    return `${percent.toFixed(2)}%`;
};
ReactDOM.render(<div>
    {[1, 2, 3, 4, 5, 6].map((value, index) => <Progress key={index} percent={value / 6 * 100} shape="circle" color={`hsl(${index * 60 + 60}, 90%, 50%)`} textRender={textRender}/>)}
    {[1, 2, 3, 4, 5, 6].map((value, index) => <Progress key={index} percent={value / 6 * 100} shape="line" color={`hsl(${index * 60 + 60}, 90%, 50%)`} textRender={textRender}/>)}
</div>, mountNode);

相关区块

暂无相关区块