Progress 进度条

表明某个任务的当前进度。

规则

  • 需要准确告知当前进度,否则应该使用组件 ActivityIndicator。

  • 和 NavBar 一起搭配使用时,可以隐藏 Progress 未填充部分的轨道,提升整体感。

代码演示

基本

进度条示例。

  1. import { Progress, Button } from 'antd-mobile';
  2. class MyProgress extends React.Component {
  3. state = {
  4. percent: 50,
  5. };
  6. add = () => {
  7. let p = this.state.percent + 10;
  8. if (this.state.percent >= 100) {
  9. p = 0;
  10. }
  11. this.setState({ percent: p });
  12. }
  13. render() {
  14. const { percent } = this.state;
  15. return (
  16. <div className="progress-container">
  17. <Progress percent={30} position="fixed" />
  18. <div style={{ height: 36 }} />
  19. <Progress percent={40} position="normal" unfilled="hide" appearTransition />
  20. <div className="show-info">
  21. <div className="progress"><Progress percent={percent} position="normal" /></div>
  22. <div aria-hidden="true">{percent}%</div>
  23. </div>
  24. <Button inline style={{ marginTop: 20, marginLeft: 30 }} onClick={this.add}>(+-)10</Button>
  25. </div>
  26. );
  27. }
  28. }
  29. ReactDOM.render(<MyProgress />, mountNode);
  1. .show-info {
  2. margin-top: 0.36rem;
  3. display: flex;
  4. align-items: center;
  5. }
  6. .show-info .progress {
  7. margin-right: 0.1rem;
  8. width: 100%;
  9. }

Progress进度条 - 图1

API

适用平台:WEB、React-Native
PropertiesDescritionTypeDefault
percent进度百分比number0
position进度条的位置,fixed 将浮出固定在最顶层,可选: fixednormalstringfixed
unfilled是否隐藏未填充轨道,可选:showhidestringshow