ant-design/components/progress/demo/dynamic.html

<div class="code-box" id="demo-dynamic">
  <div class="code-box-demo">
    <div id="components-progress-demo-dynamic"></div>
    <script>(function(){"use strict";

var _antd = require('antd');

var ProgressLine = _antd.Progress.Line;
var ButtonGroup = _antd.Button.Group;

var MyProgress = React.createClass({
  displayName: "MyProgress",

  getInitialState: function getInitialState() {
    return {
      percent: 0
    };
  },
  increase: function increase() {
    var percent = this.state.percent + 10;
    if (percent > 100) {
      percent = 100;
    }
    this.setState({ percent: percent });
  },
  decline: function decline() {
    var percent = this.state.percent - 10;
    if (percent < 0) {
      percent = 0;
    }
    this.setState({ percent: percent });
  },
  render: function render() {
    return React.createElement(
      "div",
      null,
      React.createElement(ProgressLine, { percent: this.state.percent }),
      React.createElement(
        ButtonGroup,
        null,
        React.createElement(
          _antd.Button,
          { type: "ghost", onClick: this.decline },
          React.createElement(_antd.Icon, { type: "minus" })
        ),
        React.createElement(
          _antd.Button,
          { type: "ghost", onClick: this.increase },
          React.createElement(_antd.Icon, { type: "plus" })
        )
      )
    );
  }
});

ReactDOM.render(React.createElement(MyProgress, null), document.getElementById('components-progress-demo-dynamic'));})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Progress, Button, Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
<span class="hljs-keyword">const</span> ProgressLine = Progress.Line;
<span class="hljs-keyword">const</span> ButtonGroup = Button.Group;

<span class="hljs-keyword">const</span> MyProgress = React.createClass({
  getInitialState() {
    <span class="hljs-keyword">return</span> {
      percent: <span class="hljs-number">0</span>
    };
  },
  increase() {
    <span class="hljs-keyword">let</span> percent = <span class="hljs-keyword">this</span>.state.percent + <span class="hljs-number">10</span>;
    <span class="hljs-keyword">if</span> (percent &gt; <span class="hljs-number">100</span>) {
      percent = <span class="hljs-number">100</span>;
    }
    <span class="hljs-keyword">this</span>.setState({ percent });
  },
  decline() {
    <span class="hljs-keyword">let</span> percent = <span class="hljs-keyword">this</span>.state.percent - <span class="hljs-number">10</span>;
    <span class="hljs-keyword">if</span> (percent &lt; <span class="hljs-number">0</span>) {
      percent = <span class="hljs-number">0</span>;
    }
    <span class="hljs-keyword">this</span>.setState({ percent });
  },
  render() {
    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">ProgressLine</span> <span class="hljs-attribute">percent</span>=<span class="hljs-value">{this.state.percent}</span> /&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">ButtonGroup</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">Button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"ghost"</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.decline}</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"minus"</span> /&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">Button</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">Button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"ghost"</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.increase}</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"plus"</span> /&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">Button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">ButtonGroup</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>;</span>
  }
});

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">MyProgress</span> /&gt;</span>, document.getElementById('components-progress-demo-dynamic'));</span></code></pre></div>
  </div>
  <div class="code-box-meta markdown">
    <div class="code-box-title">
      <a href="#demo-dynamic">动态展示</a>
    </div>
    <p>会动的进度条才是好进度条。</p>
    <span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
  </div>
</div>