Progress 进度条
展示操作的当前进度。
何时使用
在操作需要较长时间才能完成时,为用户显示该操作的当前进度和状态。
- 当一个操作会打断当前界面,或者需要在后台运行,且耗时可能超过 2 秒时;
- 当需要显示一个操作完成的百分比时。
代码演示
进度条
进度条。
import React from 'react';
import ReactDOM from 'react-dom';
import { Progress } from 'choerodon-ui/pro';
ReactDOM.render(
<div>
<Progress value={40} />
<Progress value={50} status="active" />
<Progress value={70} status="exception" />
<Progress value={50} status="success" />
<Progress value={40} showInfo={false} />
</div>,
document.getElementById('container')
);
受控
受控。
import React from 'react';
import ReactDOM from 'react-dom';
import { Progress } from 'choerodon-ui/pro';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
completed: 0,
status: 'active',
};
}
componentDidMount() {
this.timer = setTimeout(() => this.progress(5), 1000);
}
componentWillUnmount() {
clearTimeout(this.timer);
}
progress(completed) {
if (completed > 100) {
this.setState({
completed: 100,
status: 'success',
});
} else {
this.setState({
completed,
});
const diff = Math.round(Math.random() * 10);
数据源
绑定数据源。
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Progress } from 'choerodon-ui/pro';
class App extends React.Component {
ds = new DataSet({
autoCreate: true,
fields: [
{ name: 'percent', type: 'number', defaultValue: 20 },
],
});
render() {
return <Progress dataSet={this.ds} name="percent" />;
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
自定义文字格式
自定义文字格式。
import React from 'react';
import ReactDOM from 'react-dom';
import { Progress } from 'choerodon-ui/pro';
function format() {
return 'Done';
}
ReactDOM.render(
<Progress value={100} format={format} status="success" />,
document.getElementById('container')
);
圆形进度条
圆形进度条。
import React from 'react';
import ReactDOM from 'react-dom';
import { Progress } from 'choerodon-ui/pro';
function format() {
return 'Done';
}
ReactDOM.render(
<div>
<Progress
style={{ marginRight: 10 }}
value={75}
type="circle"
size="small"
/>
<Progress
style={{ marginRight: 10 }}
value={100}
type="circle"
format={format}
status="success"
/>
<Progress value={35} type="circle" status="exception" size="large" />
</div>,
document.getElementById('container'),
);
仪表盘进度条
仪表盘
import React from 'react';
import ReactDOM from 'react-dom';
import { Progress } from 'choerodon-ui/pro';
ReactDOM.render(
<div>
<Progress style={{ marginRight: 10 }} value={75} type="dashboard" />
<Progress
style={{ marginRight: 10 }}
value={100}
type="dashboard"
status="success"
/>
<Progress value={25} type="dashboard" status="exception" />
</div>,
document.getElementById('container'),
);
加载
加载。
import React from 'react';
import ReactDOM from 'react-dom';
import { Progress } from 'choerodon-ui/pro';
ReactDOM.render(
<div>
<Progress style={{ marginRight: 10 }} type="loading" size="small" />
<Progress style={{ marginRight: 10 }} type="loading" status="success" />
<Progress type="loading" size="large" status="exception" />
</div>,
document.getElementById('container'),
);
API
Progress 的属性说明如下:
参数 | 说明 | 类型 |
---|---|---|
value | 当前百分比值,同 percent,受控。 | number |
dataSet | 数据源 | DataSet |
name | 字段名 | string |
更多属性请参考 Progress。
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .