Progress 进度条

定义／Definition

规则 / Rule

• 是一条轨迹，随着进程的进行从左向右进行填充；

• 不支持用户交互行为

代码演示

基本

import { Progress, WhiteSpace, Button, Flex, WingBlank } from 'antd-mobile';
const MyProgress = React.createClass({
  getInitialState() {
    return {
      percent: 0,
    };
  },
  increase() {
    let percent = this.state.percent + 10;
    if (percent > 100) {
      percent = 100;
    }
    this.setState({ percent, status });
  },
  decline() {
    let percent = this.state.percent - 10;
    if (percent < 0) {
      percent = 0;
    }
    this.setState({ percent, status });
  },
  render() {
    return (
      <div className="progress-container">
        {this.state.percent === 100 ? null :
          <Progress percent={this.state.percent} position="fixed" />
        }
        <Progress percent={this.state.percent} position="normal" />
        <WhiteSpace size={20} />
        <WingBlank size={20}>
          <Flex>
            <Flex.Item>
              <Button onClick={this.increase}> + </Button>
            </Flex.Item>
            <Flex.Item>
              <Button onClick={this.decline}> - </Button>
            </Flex.Item>
          </Flex>
        </WingBlank>
        <WhiteSpace size={20} />
      </div>
    );
  },
});
ReactDOM.render(<MyProgress />, mountNode);

API