Progress 进度

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

Guide

展示操作的当前进度。

何时使用

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

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

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

API

进度

代码示例

基本进度条

普通模式的进度条，通过 showInfo 属性控制是否显示右侧的文本信息。

查看源码在线预览

import { Progress } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Progress percent={30} />
    <Progress percent={50} />
    <Progress percent={90} />
    <Progress percent={40} showInfo={false} />
  </div>,
  mountNode
);

圆形进度条

State 目前支持两种不同类型的进度条，分别是条状进度条和圆形进度条。可以通过 shape 属性来控制。

查看源码在线预览

import { Progress } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Progress percent={30} shape="circle" /> &nbsp;&nbsp;
    <Progress percent={50} shape="circle" /> &nbsp;&nbsp;
    <Progress percent={90} shape="circle" /> &nbsp;&nbsp;
    <Progress percent={40} shape="circle" showInfo={false} />
  </div>,
  mountNode
);

动态展示

当 type 取值为 progressive，此时为增强模式的进度条，会根据当前进度展示不同的样式

查看源码在线预览

import { Progress, Button, Select } from "@icedesign/base";
class CustomProgress extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      percent: 0,
      shape: "circle",
      type: "progressive",
      size: "medium"
    };
  }
  startProgress() {
    if (this.interval) {
      clearInterval(this.interval);
    }
    this.interval = setInterval(() => {
      if (this.state.percent > 99) {
        clearInterval(this.interval);
      }
      this.setState(prevState => {
        const current =
          prevState.percent + 15 > 100 ? 100 : prevState.percent + 15;
        return { percent: current };
      });
    }, 500);
  }
  stopProgress() {
    if (this.interval) {
      clearInterval(this.interval);
    }
    this.setState({ percent: 0 });
  }
  onChangeShape(val) {
    this.setState({
      shape: val
    });
  }
  onChangeType(val) {
    this.setState({
      type: val
    });
  }
  onChangeSize(val) {
    this.setState({
      size: val
    });
  }
  render() {
    const state = this.state;
    return (
      <div>
        <div className="progress-panel">
          <Select
            onChange={this.onChangeShape.bind(this)}
            className="custom-select"
            placeholder="选择进度条的外观"
          >
            {["circle", "line"].map((item, index) => (
              <Select.Option key={index} value={item}>
                {item}
              </Select.Option>
            ))}
          </Select>
          <Select
            onChange={this.onChangeType.bind(this)}
            className="custom-select"
            placeholder="请选择进度条的类型"
          >
            {["normal", "progressive"].map((item, index) => (
              <Select.Option key={index} value={item}>
                {item}
              </Select.Option>
            ))}
          </Select>
          <Select
            onChange={this.onChangeSize.bind(this)}
            className="custom-select"
            placeholder="请选择进度条的尺寸"
          >
            {["small", "medium", "large"].map((item, index) => (
              <Select.Option key={index} value={item}>
                {item}
              </Select.Option>
            ))}
          </Select>
          <Button.Group>
            <Button
              onClick={this.startProgress.bind(this)}
              disabled={state.percent > 0}
            >
              开始
            </Button>
            <Button
              onClick={this.stopProgress.bind(this)}
              type="primary"
              disabled={state.percent === 0}
            >
              归零
            </Button>
          </Button.Group>
        </div>
        <Progress
          percent={state.percent}
          type={state.type}
          shape={state.shape}
          size={state.size}
        />
      </div>
    );
  }
}
ReactDOM.render(<CustomProgress />, mountNode);

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

自定义展示内容

可以通过 Suffix 属性传入您想要的展示的文本内容。

查看源码在线预览

import { Progress, Icon } from "@icedesign/base";
const successPrefix = (
  <Icon type="select" size="xl" style={{ color: "green" }} />
);
const errorPrefix = <Icon type="close" size="xl" style={{ color: "red" }} />;
ReactDOM.render(
  <div>
    <Progress percent={66} shape="circle" state="error" suffix={errorPrefix} />{" "}
    &nbsp;&nbsp;
    <Progress
      percent={100}
      shape="circle"
      state="success"
      suffix={successPrefix}
    />
  </div>,
  mountNode
);

尺寸

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

查看源码在线预览

import { Progress } from "@icedesign/base";
ReactDOM.render(
  <div>
    <h3>不同尺寸的进度条</h3>
    <Progress percent={30} size="small" />
    <Progress percent={50} size="medium" />
    <Progress percent={90} size="large" />
    <br />
    <h3>不同尺寸的圆形进度条</h3>
    <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 属性的值时，或者不提供 state 属性值时，Progress 处于常规状态。Progress 组件支持三种状态的展示，分别是常规状态、成功状态，和失败状态。您可以通过 state 属性展示流程的不同周期。

查看源码在线预览

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

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

相关区块

暂无相关区块