Progress 进度条

展示操作的当前进度。

何时使用

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

  • 当一个操作会打断当前界面,或者需要在后台运行,且耗时可能超过 2 秒时;
  • 当需要显示一个操作完成的百分比时。

代码演示

进度条

进度条。

Progress进度条 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Progress } from 'choerodon-ui/pro';
  4. ReactDOM.render(
  5. <div>
  6. <Progress value={40} />
  7. <Progress value={50} status="active" />
  8. <Progress value={70} status="exception" />
  9. <Progress value={50} status="success" />
  10. <Progress value={40} showInfo={false} />
  11. </div>,
  12. document.getElementById('container')
  13. );

受控

受控。

Progress进度条 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Progress } from 'choerodon-ui/pro';
  4. class App extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. completed: 0,
  9. status: 'active',
  10. };
  11. }
  12. componentDidMount() {
  13. this.timer = setTimeout(() => this.progress(5), 1000);
  14. }
  15. componentWillUnmount() {
  16. clearTimeout(this.timer);
  17. }
  18. progress(completed) {
  19. if (completed > 100) {
  20. this.setState({
  21. completed: 100,
  22. status: 'success',
  23. });
  24. } else {
  25. this.setState({
  26. completed,
  27. });
  28. const diff = Math.round(Math.random() * 10);

数据源

绑定数据源。

Progress进度条 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, Progress } from 'choerodon-ui/pro';
  4. class App extends React.Component {
  5. ds = new DataSet({
  6. autoCreate: true,
  7. fields: [
  8. { name: 'percent', type: 'number', defaultValue: 20 },
  9. ],
  10. });
  11. render() {
  12. return <Progress dataSet={this.ds} name="percent" />;
  13. }
  14. }
  15. ReactDOM.render(
  16. <App />,
  17. document.getElementById('container')
  18. );

自定义文字格式

自定义文字格式。

Progress进度条 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Progress } from 'choerodon-ui/pro';
  4. function format() {
  5. return 'Done';
  6. }
  7. ReactDOM.render(
  8. <Progress value={100} format={format} status="success" />,
  9. document.getElementById('container')
  10. );

圆形进度条

圆形进度条。

Progress进度条 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Progress } from 'choerodon-ui/pro';
  4. function format() {
  5. return 'Done';
  6. }
  7. ReactDOM.render(
  8. <div>
  9. <Progress
  10. style={{ marginRight: 10 }}
  11. value={75}
  12. type="circle"
  13. size="small"
  14. />
  15. <Progress
  16. style={{ marginRight: 10 }}
  17. value={100}
  18. type="circle"
  19. format={format}
  20. status="success"
  21. />
  22. <Progress value={35} type="circle" status="exception" size="large" />
  23. </div>,
  24. document.getElementById('container'),
  25. );

仪表盘进度条

仪表盘

Progress进度条 - 图6

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Progress } from 'choerodon-ui/pro';
  4. ReactDOM.render(
  5. <div>
  6. <Progress style={{ marginRight: 10 }} value={75} type="dashboard" />
  7. <Progress
  8. style={{ marginRight: 10 }}
  9. value={100}
  10. type="dashboard"
  11. status="success"
  12. />
  13. <Progress value={25} type="dashboard" status="exception" />
  14. </div>,
  15. document.getElementById('container'),
  16. );

加载

加载。

Progress进度条 - 图7

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Progress } from 'choerodon-ui/pro';
  4. ReactDOM.render(
  5. <div>
  6. <Progress style={{ marginRight: 10 }} type="loading" size="small" />
  7. <Progress style={{ marginRight: 10 }} type="loading" status="success" />
  8. <Progress type="loading" size="large" status="exception" />
  9. </div>,
  10. document.getElementById('container'),
  11. );

API

Progress 的属性说明如下:

参数说明类型
value当前百分比值,同 percent,受控。number
dataSet数据源DataSet
name字段名string

更多属性请参考 Progress