组件演示

[{"title":"进度条","id":"components-progress-demo-basic","tags":[],"filepath":"site/components/progress/demo/basic.md","directory":"components/progress/demo","filename":"basic","meta":{"title":"进度条","description":"\n<p>标准的进度条。</p>\n","order":"0","filepath":"site/components/progress/demo/basic.md","filename":"basic","directory":"components/progress/demo","id":"components-progress-demo-basic","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _uxcoreProgress = require(\"uxcore-progress\");\n\n;\n\nReactDOM.render(React.createElement(\n \"div\",\n null,\n React.createElement(_uxcoreProgress.Line, { percent: 30 }),\n React.createElement(_uxcoreProgress.Line, { percent: 50, status: \"active\" }),\n React.createElement(_uxcoreProgress.Line, { percent: 70, status: \"exception\" }),\n React.createElement(_uxcoreProgress.Line, { percent: 100 }),\n React.createElement(_uxcoreProgress.Line, { percent: 50, showInfo: false })\n), document.getElementById('components-progress-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Line } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-progress'</span>;;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Line</span> <span class=\"hljs-attribute\">percent</span>=<span class=\"hljs-value\">{30}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Line</span> <span class=\"hljs-attribute\">percent</span>=<span class=\"hljs-value\">{50}</span> <span class=\"hljs-attribute\">status</span>=<span class=\"hljs-value\">\"active\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Line</span> <span class=\"hljs-attribute\">percent</span>=<span class=\"hljs-value\">{70}</span> <span class=\"hljs-attribute\">status</span>=<span class=\"hljs-value\">\"exception\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Line</span> <span class=\"hljs-attribute\">percent</span>=<span class=\"hljs-value\">{100}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Line</span> <span class=\"hljs-attribute\">percent</span>=<span class=\"hljs-value\">{50}</span> <span class=\"hljs-attribute\">showInfo</span>=<span class=\"hljs-value\">{false}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n , document.getElementById('components-progress-demo-basic'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"进度条","id":"components-progress-demo-circle","tags":[],"filepath":"site/components/progress/demo/circle.md","directory":"components/progress/demo","filename":"circle","meta":{"title":"进度条","description":"\n<p>圆形进度条。</p>\n","order":"1","filepath":"site/components/progress/demo/circle.md","filename":"circle","directory":"components/progress/demo","id":"components-progress-demo-circle","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcoreProgress = require('uxcore-progress');\n\n;\n\nReactDOM.render(React.createElement(\n 'div',\n null,\n React.createElement(\n 'div',\n { style: { display: 'inline-block' } },\n React.createElement(_uxcoreProgress.Circle, { percent: 70, status: 'exception' })\n ),\n React.createElement(\n 'div',\n { style: { display: 'inline-block' } },\n React.createElement(_uxcoreProgress.Circle, { percent: 100, status: 'success' })\n ),\n React.createElement(\n 'div',\n { style: { display: 'inline-block' } },\n React.createElement(_uxcoreProgress.Circle, { percent: 50, showInfo: true })\n )\n), document.getElementById('components-progress-demo-circle'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Circle } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-progress'</span>;;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">display:</span> '<span class=\"hljs-attribute\">inline-block</span>' }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Circle</span> <span class=\"hljs-attribute\">percent</span>=<span class=\"hljs-value\">{70}</span> <span class=\"hljs-attribute\">status</span>=<span class=\"hljs-value\">\"exception\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">display:</span> '<span class=\"hljs-attribute\">inline-block</span>' }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Circle</span> <span class=\"hljs-attribute\">percent</span>=<span class=\"hljs-value\">{100}</span> <span class=\"hljs-attribute\">status</span>=<span class=\"hljs-value\">\"success\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">display:</span> '<span class=\"hljs-attribute\">inline-block</span>' }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Circle</span> <span class=\"hljs-attribute\">percent</span>=<span class=\"hljs-value\">{50}</span> <span class=\"hljs-attribute\">showInfo</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n , document.getElementById('components-progress-demo-circle'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"小型进度条","id":"components-progress-demo-mini","tags":[],"filepath":"site/components/progress/demo/mini.md","directory":"components/progress/demo","filename":"mini","meta":{"title":"小型进度条","description":"\n<p>适合放在较狭窄的区域内。</p>\n","order":"2","filepath":"site/components/progress/demo/mini.md","filename":"mini","directory":"components/progress/demo","id":"components-progress-demo-mini","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _uxcore = require(\"uxcore\");\n\nReactDOM.render(React.createElement(\n \"div\",\n { style: { width: 170 } },\n React.createElement(_uxcore.Progress, { percent: 30, strokeWidth: 5 }),\n React.createElement(_uxcore.Progress, { percent: 50, strokeWidth: 5, status: \"active\" }),\n React.createElement(_uxcore.Progress, { percent: 70, strokeWidth: 5, status: \"exception\" }),\n React.createElement(_uxcore.Progress, { percent: 100, strokeWidth: 5 })\n), document.getElementById('components-progress-demo-mini'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Progress } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">170</span> }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Progress</span> <span class=\"hljs-attribute\">percent</span>=<span class=\"hljs-value\">{30}</span> <span class=\"hljs-attribute\">strokeWidth</span>=<span class=\"hljs-value\">{5}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Progress</span> <span class=\"hljs-attribute\">percent</span>=<span class=\"hljs-value\">{50}</span> <span class=\"hljs-attribute\">strokeWidth</span>=<span class=\"hljs-value\">{5}</span> <span class=\"hljs-attribute\">status</span>=<span class=\"hljs-value\">\"active\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Progress</span> <span class=\"hljs-attribute\">percent</span>=<span class=\"hljs-value\">{70}</span> <span class=\"hljs-attribute\">strokeWidth</span>=<span class=\"hljs-value\">{5}</span> <span class=\"hljs-attribute\">status</span>=<span class=\"hljs-value\">\"exception\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Progress</span> <span class=\"hljs-attribute\">percent</span>=<span class=\"hljs-value\">{100}</span> <span class=\"hljs-attribute\">strokeWidth</span>=<span class=\"hljs-value\">{5}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n , document.getElementById('components-progress-demo-mini'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"动态展示","id":"components-progress-demo-dynamic","tags":[],"filepath":"site/components/progress/demo/dynamic.md","directory":"components/progress/demo","filename":"dynamic","meta":{"title":"动态展示","description":"\n<p>会动的进度条才是好进度条。</p>\n","order":"3","filepath":"site/components/progress/demo/dynamic.md","filename":"dynamic","directory":"components/progress/demo","id":"components-progress-demo-dynamic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcoreProgress = require('uxcore-progress');\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n percent: 0\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'increase',\n value: function increase() {\n var percent = this.state.percent + 10;\n if (percent > 100) {\n percent = 100;\n }\n this.setState({ percent: percent });\n }\n }, {\n key: 'decline',\n value: function decline() {\n var percent = this.state.percent - 10;\n if (percent < 0) {\n percent = 0;\n }\n this.setState({ percent: percent });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'div',\n null,\n React.createElement(_uxcoreProgress.Line, { percent: this.state.percent })\n ),\n React.createElement(\n 'div',\n { style: { display: 'inline-block' } },\n React.createElement(_uxcoreProgress.Circle, { percent: this.state.percent })\n ),\n React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Button,\n { onClick: this.decline.bind(this), type: 'secondary', size: 'small' },\n React.createElement('i', { className: 'kuma-icon kuma-icon-stop' })\n ),\n React.createElement(\n _uxcore.Button,\n { onClick: this.increase.bind(this), type: 'secondary', size: 'small' },\n React.createElement('i', { className: 'kuma-icon kuma-icon-follow' })\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-progress-demo-dynamic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Line, Circle } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-progress'</span>;;\n<span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n percent: <span class=\"hljs-number\">0</span>,\n };\n }\n\n increase() {\n <span class=\"hljs-keyword\">let</span> percent = <span class=\"hljs-keyword\">this</span>.state.percent + <span class=\"hljs-number\">10</span>;\n <span class=\"hljs-keyword\">if</span> (percent &gt; <span class=\"hljs-number\">100</span>) {\n percent = <span class=\"hljs-number\">100</span>;\n }\n <span class=\"hljs-keyword\">this</span>.setState({ percent });\n }\n decline() {\n <span class=\"hljs-keyword\">let</span> percent = <span class=\"hljs-keyword\">this</span>.state.percent - <span class=\"hljs-number\">10</span>;\n <span class=\"hljs-keyword\">if</span> (percent &lt; <span class=\"hljs-number\">0</span>) {\n percent = <span class=\"hljs-number\">0</span>;\n }\n <span class=\"hljs-keyword\">this</span>.setState({ percent });\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Line</span> <span class=\"hljs-attribute\">percent</span>=<span class=\"hljs-value\">{this.state.percent}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">display:</span> '<span class=\"hljs-attribute\">inline-block</span>' }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Circle</span> <span class=\"hljs-attribute\">percent</span>=<span class=\"hljs-value\">{this.state.percent}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{this.decline.bind(this)}</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span> <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"small\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">i</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"kuma-icon kuma-icon-stop\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{this.increase.bind(this)}</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span> <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"small\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">i</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"kuma-icon kuma-icon-follow\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n , document.getElementById('components-progress-demo-dynamic'));</span></code></pre></div>"},"status":"public","toc":""}]

标准的进度条。

import { Line } from 'uxcore-progress';;

ReactDOM.render(
  <div>
    <Line percent={30} />
    <Line percent={50} status="active" />
    <Line percent={70} status="exception" />
    <Line percent={100} />
    <Line percent={50} showInfo={false} />
  </div>
  , document.getElementById('components-progress-demo-basic'));

圆形进度条。

import { Circle } from 'uxcore-progress';;

ReactDOM.render(
  <div>
    <div style={{ display: 'inline-block' }}>
      <Circle percent={70} status="exception" />
    </div>
    <div style={{ display: 'inline-block' }}>
      <Circle percent={100} status="success" />
    </div>
    <div style={{ display: 'inline-block' }}>
      <Circle percent={50} showInfo />
    </div>
  </div>
  , document.getElementById('components-progress-demo-circle'));

适合放在较狭窄的区域内。

import { Progress } from 'uxcore';

ReactDOM.render(
  <div style={{ width: 170 }}>
    <Progress percent={30} strokeWidth={5} />
    <Progress percent={50} strokeWidth={5} status="active" />
    <Progress percent={70} strokeWidth={5} status="exception" />
    <Progress percent={100} strokeWidth={5} />
  </div>
  , document.getElementById('components-progress-demo-mini'));

会动的进度条才是好进度条。

import { Line, Circle } from 'uxcore-progress';;
import { Button } from 'uxcore';

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      percent: 0,
    };
  }

  increase() {
    let percent = this.state.percent + 10;
    if (percent > 100) {
      percent = 100;
    }
    this.setState({ percent });
  }
  decline() {
    let percent = this.state.percent - 10;
    if (percent < 0) {
      percent = 0;
    }
    this.setState({ percent });
  }

  render() {
    return (
      <div>
        <div>
          <Line percent={this.state.percent} />
        </div>
        <div style={{ display: 'inline-block' }}>
          <Circle percent={this.state.percent} />
        </div>
        <div>
          <Button onClick={this.decline.bind(this)} type="secondary" size="small">
            <i className="kuma-icon kuma-icon-stop" />
          </Button>
          <Button onClick={this.increase.bind(this)} type="secondary" size="small">
            <i className="kuma-icon kuma-icon-follow" />
          </Button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
  , document.getElementById('components-progress-demo-dynamic'));

展示操作的当前进度。

API

Line

配置项 类型 必填 默认值 功能/备注
percent 百分比 number 0
status 状态,有两个值normal、exception、active三种状态 string normal
strokeWidth 进度条线的宽度,单位是px number 1
showInfo 是否显示进度数值和状态图标 bool true

Circle

配置项 类型 必填 默认值 功能/备注
percent 百分比 number 0
status 状态,有两个值normal、exception、active三种状态 string normal
strokeWidth 进度条线的宽度,单位是px number 1
showInfo 是否显示进度数值和状态图标 bool true
size 尺寸,相当于直径 number 156