@uiw/doc/web/static/js/1350.ffe54612.chunk.js

UIW documentation website.

(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1350],{4934:e=>{function t(e){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}t.keys=()=>[],t.resolve=t,t.id=4934,e.exports=t},5301:(e,t,n)=>{"use strict";n.d(t,{Z:()=>_});var r=n(8573),s=n(6320),o=n(8563),i=n(7622),c=n(7937);const a={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"};var l=n(4760);function u(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const{path:t}=e,n=/^http/.test(t||"")?t:"https://github.com/uiwjs/uiw/blob/master/".concat(t);return(0,l.jsxs)("div",{className:a.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",n&&(0,l.jsx)("a",{href:n,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,l.jsx)("br",{}),(0,l.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,l.jsx)(c.Divider,{type:"vertical"}),(0,l.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,l.jsx)(c.Divider,{type:"vertical"}),(0,l.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,l.jsx)(c.Divider,{type:"vertical"}),(0,l.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,l.jsx)(c.Divider,{type:"vertical"}),(0,l.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,l.jsx)(c.Divider,{type:"vertical"}),(0,l.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const p=s.ZP.Preview,f=s.ZP.Code,d=s.ZP.Toolbar,m=e=>{var t,n;let{node:i,components:c,data:a,...u}=e;const m=(0,r.useRef)(null),{headings:_,headingsList:y,...h}=u;(0,r.useEffect)((()=>{if(m.current){const e=m.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(m.current,e)}}),[m]);const g=null===i||void 0===i||null===(t=i.position)||void 0===t?void 0:t.start.line,v=null===i||void 0===i||null===(n=i.data)||void 0===n?void 0:n.meta,b=(0,o.Mx)(v)||String(g),P=c["".concat(b)];if(b&&"function"===typeof P){const e=a[b].value||"",t=(0,o.aE)(v||"");return(0,l.jsxs)(s.ZP,{ref:m,children:[(0,l.jsx)(p,{style:{background:t.bg||"transparent"},children:(0,l.jsx)(P,{})}),(0,l.jsx)(d,{text:e,children:t.title||"Example"}),(0,l.jsx)(f,{children:(0,l.jsx)("pre",{...h})})]})}return(0,l.jsx)("code",{...h})};function _(e){return(0,l.jsxs)(r.Fragment,{children:[(0,l.jsx)(i.Z,{className:a.markdownWrap,source:e.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:t=>(0,l.jsx)(m,{...e,...t})}}),(0,l.jsx)(u,{path:e.path})]})}},1249:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>i});const r={components:{20:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);var s=r.Progress.Line,o={marginBottom:10};return function(){return t.default.createElement("div",null,t.default.createElement(r.Progress.Line,{style:o,percent:30}),t.default.createElement(s,{style:o,percent:50,status:"active"}),t.default.createElement(s,{style:o,percent:70,status:"exception"}),t.default.createElement(s,{style:o,percent:100}),t.default.createElement(s,{style:o,percent:50,showText:!1}))}}(),44:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);var s=r.Progress.Line,o={marginBottom:10};return function(){return t.default.createElement("div",null,t.default.createElement(r.Progress.Line,{style:o,strokeWidth:6,percent:30}),t.default.createElement(s,{style:o,strokeWidth:14,percent:50,status:"active"}),t.default.createElement(s,{style:o,strokeWidth:18,percent:70,status:"exception"}),t.default.createElement(s,{style:o,strokeWidth:12,percent:100}),t.default.createElement(s,{style:o,strokeWidth:14,percent:50,showText:!1}))}}(),66:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);var s=r.Progress.Circle,o={marginBottom:10};return function(){return t.default.createElement("div",null,t.default.createElement(r.Progress.Circle,{style:o,percent:30}),t.default.createElement(s,{style:o,percent:75}),t.default.createElement(s,{style:o,percent:70,status:"exception"}),t.default.createElement(s,{style:o,percent:100}))}}(),89:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);var s={marginRight:15};return function(){return t.default.createElement("div",null,t.default.createElement(r.Progress.Circle,{style:s,width:80,strokeWidth:2,percent:30}),t.default.createElement(r.Progress.Circle,{style:s,width:100,strokeWidth:10,percent:75}),t.default.createElement(r.Progress.Circle,{style:s,percent:70,status:"exception"}),t.default.createElement(r.Progress.Circle,{style:s,width:100,strokeWidth:3,percent:75}))}}(),111:function(){function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}var t,r=(t=n(8573))&&t.__esModule?t:{default:t},s=n(7937);function o(e,t){if(n=e,!(null!=(r=t)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](n):n instanceof r))throw new TypeError("Cannot call a class as a function");var n,r}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,c(r.key),r)}}function c(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var s=r.call(t,n||"default");if("object"!==e(s))return s;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}function a(e,t){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},a(e,t)}function l(t){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,s=u(t);if(n){var o=u(this).constructor;r=Reflect.construct(s,arguments,o)}else r=s.apply(this,arguments);return function(t,n){if(n&&("object"===e(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(this,r)}}function u(e){return u=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},u(e)}return function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&a(e,t)}(p,e);var t,n,c,u=l(p);function p(e){var t;return o(this,p),(t=u.call(this,e)).state={percent:50},t}return t=p,(n=[{key:"increase",value:function(){var e=this.state.percent+10;e>100&&(e=100),this.setState({percent:e})}},{key:"decline",value:function(){var e=this.state.percent-10;e<0&&(e=0),this.setState({percent:e})}},{key:"render",value:function(){return r.default.createElement("div",{style:{maxWidth:400}},r.default.createElement(s.Progress.Line,{percent:this.state.percent}),r.default.createElement(s.Progress.Circle,{percent:this.state.percent}),r.default.createElement("div",null,r.default.createElement("button",{onClick:this.decline.bind(this)},"minus -"),r.default.createElement("button",{onClick:this.increase.bind(this)},"plus +")))}}])&&i(t.prototype,n),c&&i(t,c),Object.defineProperty(t,"prototype",{writable:!1}),p}(r.default.Component)}(),158:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);var s={marginRight:10};return function(){return t.default.createElement("div",null,t.default.createElement(r.Progress.Circle,{style:s,percent:80,type:"circle",format:function(e){return t.default.createElement("span",null,"".concat(e," %"),t.default.createElement("div",{style:{padding:"10px 0 0 0",fontSize:21}},"\u5df2\u5b8c\u6210"))}}),t.default.createElement(r.Progress.Circle,{style:s,percent:70,status:"exception",type:"circle",format:function(e){return t.default.createElement("span",null,"".concat(e," %"),t.default.createElement("div",{style:{padding:"10px 0 0 0",fontSize:21}},"\u5df2\u5173\u95ed"))}}),t.default.createElement(r.Progress.Circle,{style:s,percent:100,type:"circle",format:function(e){return"\u5df2\u5b8c\u6210"}}),t.default.createElement(r.Progress.Line,{style:s,percent:70,format:function(e){return"".concat(e,"\u2103")}}),t.default.createElement(r.Progress.Line,{strokeWidth:18,percent:1,status:"exception"}))}}()},data:{20:{name:20,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar Line = _uiw.Progress.Line;\nvar sty = {\n  marginBottom: 10\n};\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Progress.Line, {\n    style: sty,\n    percent: 30\n  }), /*#__PURE__*/_react["default"].createElement(Line, {\n    style: sty,\n    percent: 50,\n    status: "active"\n  }), /*#__PURE__*/_react["default"].createElement(Line, {\n    style: sty,\n    percent: 70,\n    status: "exception"\n  }), /*#__PURE__*/_react["default"].createElement(Line, {\n    style: sty,\n    percent: 100\n  }), /*#__PURE__*/_react["default"].createElement(Line, {\n    style: sty,\n    percent: 50,\n    showText: false\n  }));\n};',language:"jsx",value:"import React from 'react';\nimport { Progress } from 'uiw';\n\nconst { Line } = Progress;\nconst sty = {marginBottom:10}\n\nexport default function Demo() {\n  return (\n    <div>\n      <Progress.Line style={sty} percent={30} />\n      <Line style={sty} percent={50} status=\"active\" />\n      <Line style={sty} percent={70} status=\"exception\" />\n      <Line style={sty} percent={100} />\n      <Line style={sty} percent={50} showText={false} />\n    </div>\n  );\n}"},44:{name:44,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar Line = _uiw.Progress.Line;\nvar sty = {\n  marginBottom: 10\n};\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Progress.Line, {\n    style: sty,\n    strokeWidth: 6,\n    percent: 30\n  }), /*#__PURE__*/_react["default"].createElement(Line, {\n    style: sty,\n    strokeWidth: 14,\n    percent: 50,\n    status: "active"\n  }), /*#__PURE__*/_react["default"].createElement(Line, {\n    style: sty,\n    strokeWidth: 18,\n    percent: 70,\n    status: "exception"\n  }), /*#__PURE__*/_react["default"].createElement(Line, {\n    style: sty,\n    strokeWidth: 12,\n    percent: 100\n  }), /*#__PURE__*/_react["default"].createElement(Line, {\n    style: sty,\n    strokeWidth: 14,\n    percent: 50,\n    showText: false\n  }));\n};',language:"jsx",value:"import React from 'react';\nimport { Progress } from 'uiw';\n\nconst { Line } = Progress;\nconst sty = {marginBottom:10}\n\nexport default function Demo() {\n  return (\n    <div>\n      <Progress.Line style={sty} strokeWidth={6} percent={30} />\n      <Line style={sty} strokeWidth={14} percent={50} status=\"active\" />\n      <Line style={sty} strokeWidth={18} percent={70} status=\"exception\" />\n      <Line style={sty} strokeWidth={12} percent={100} />\n      <Line style={sty} strokeWidth={14} percent={50} showText={false} />\n    </div>\n  );\n}"},66:{name:66,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar Circle = _uiw.Progress.Circle;\nvar sty = {\n  marginBottom: 10\n};\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Progress.Circle, {\n    style: sty,\n    percent: 30\n  }), /*#__PURE__*/_react["default"].createElement(Circle, {\n    style: sty,\n    percent: 75\n  }), /*#__PURE__*/_react["default"].createElement(Circle, {\n    style: sty,\n    percent: 70,\n    status: "exception"\n  }), /*#__PURE__*/_react["default"].createElement(Circle, {\n    style: sty,\n    percent: 100\n  }));\n};',language:"jsx",value:"import React from 'react';\nimport { Progress } from 'uiw';\n\nconst { Circle } = Progress;\nconst sty = {marginBottom:10}\n\nexport default function Demo() {\n  return (\n    <div>\n      <Progress.Circle style={sty} percent={30} />\n      <Circle style={sty} percent={75} />\n      <Circle style={sty} percent={70} status=\"exception\" />\n      <Circle style={sty} percent={100} />\n    </div>\n  );\n}"},89:{name:89,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar sty = {\n  marginRight: 15\n};\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Progress.Circle, {\n    style: sty,\n    width: 80,\n    strokeWidth: 2,\n    percent: 30\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Progress.Circle, {\n    style: sty,\n    width: 100,\n    strokeWidth: 10,\n    percent: 75\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Progress.Circle, {\n    style: sty,\n    percent: 70,\n    status: "exception"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Progress.Circle, {\n    style: sty,\n    width: 100,\n    strokeWidth: 3,\n    percent: 75\n  }));\n};',language:"jsx",value:"import React from 'react';\nimport { Progress } from 'uiw';\n\nlet sty = {marginRight:15}\n\nexport default function Demo() {\n  return (\n    <div>\n      <Progress.Circle style={sty} width={80} strokeWidth={2} percent={30} />\n      <Progress.Circle style={sty} width={100} strokeWidth={10} percent={75} />\n      <Progress.Circle style={sty} percent={70} status=\"exception\" />\n      <Progress.Circle style={sty} width={100} strokeWidth={3} percent={75} />\n    </div>\n  );\n}"},111:{name:111,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\nfunction _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, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nvar Demo = /*#__PURE__*/function (_React$Component) {\n  _inherits(Demo, _React$Component);\n  var _super = _createSuper(Demo);\n  function Demo(props) {\n    var _this;\n    _classCallCheck(this, Demo);\n    _this = _super.call(this, props);\n    _this.state = {\n      percent: 50\n    };\n    return _this;\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({\n        percent: percent\n      });\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({\n        percent: percent\n      });\n    }\n  }, {\n    key: "render",\n    value: function render() {\n      var sty = {\n        marginRight: 15\n      };\n      return /*#__PURE__*/_react["default"].createElement("div", {\n        style: {\n          maxWidth: 400\n        }\n      }, /*#__PURE__*/_react["default"].createElement(_uiw.Progress.Line, {\n        percent: this.state.percent\n      }), /*#__PURE__*/_react["default"].createElement(_uiw.Progress.Circle, {\n        percent: this.state.percent\n      }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {\n        onClick: this.decline.bind(this)\n      }, "minus -"), /*#__PURE__*/_react["default"].createElement("button", {\n        onClick: this.increase.bind(this)\n      }, "plus +")));\n    }\n  }]);\n  return Demo;\n}(_react["default"].Component);\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Progress } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor(props){\n    super(props);\n    this.state = {\n      percent: 50,\n    }\n  }\n  increase(){\n    let percent = this.state.percent + 10;\n    if (percent > 100) {\n      percent = 100;\n    }\n    this.setState({ percent });\n  }\n  decline(){\n    let percent = this.state.percent - 10;\n    if (percent < 0) {\n      percent = 0;\n    }\n    this.setState({ percent });\n  }\n  render() {\n    let sty = {marginRight:15}\n    return (\n      <div style={{maxWidth:400}}>\n        <Progress.Line percent={this.state.percent} />\n        <Progress.Circle percent={this.state.percent} />\n        <div>\n          <button onClick={this.decline.bind(this)}>minus -</button>\n          <button onClick={this.increase.bind(this)}>plus +</button>\n        </div>\n      </div>\n    )\n  }\n}\n\nexport default Demo;"},158:{name:158,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar sty = {\n  marginRight: 10\n};\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Progress.Circle, {\n    style: sty,\n    percent: 80,\n    type: "circle",\n    format: function format(percent) {\n      return /*#__PURE__*/_react["default"].createElement("span", null, "".concat(percent, " %"), /*#__PURE__*/_react["default"].createElement("div", {\n        style: {\n          padding: "10px 0 0 0",\n          fontSize: 21\n        }\n      }, "\\u5DF2\\u5B8C\\u6210"));\n    }\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Progress.Circle, {\n    style: sty,\n    percent: 70,\n    status: "exception",\n    type: "circle",\n    format: function format(percent) {\n      return /*#__PURE__*/_react["default"].createElement("span", null, "".concat(percent, " %"), /*#__PURE__*/_react["default"].createElement("div", {\n        style: {\n          padding: "10px 0 0 0",\n          fontSize: 21\n        }\n      }, "\\u5DF2\\u5173\\u95ED"));\n    }\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Progress.Circle, {\n    style: sty,\n    percent: 100,\n    type: "circle",\n    format: function format(percent) {\n      return "\\u5DF2\\u5B8C\\u6210";\n    }\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Progress.Line, {\n    style: sty,\n    percent: 70,\n    format: function format(percent) {\n      return "".concat(percent, "\\u2103");\n    }\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Progress.Line, {\n    strokeWidth: 18,\n    percent: 1,\n    status: "exception"\n  }));\n};',language:"jsx",value:'import React from \'react\';\nimport { Progress } from \'uiw\';\n\nconst sty = {marginRight:10}\n\nexport default function Demo() {\n  return (\n    <div>\n      <Progress.Circle style={sty} percent={80} type="circle" format={percent => (\n          <span>\n            {`${percent} %`}\n            <div style={{padding:"10px 0 0 0",fontSize:21}}>\u5df2\u5b8c\u6210</div>\n          </span>\n        )}/>\n      <Progress.Circle style={sty} percent={70} status="exception" type="circle" format={percent => (\n        <span>\n          {`${percent} %`}\n          <div style={{padding:"10px 0 0 0",fontSize:21}}>\u5df2\u5173\u95ed</div>\n        </span>\n      )}/>\n      <Progress.Circle style={sty} percent={100} type="circle" format={percent => `\u5df2\u5b8c\u6210`}/>\n      <Progress.Line style={sty} percent={70} format={percent => `${percent}\u2103`}/>\n      <Progress.Line strokeWidth={18} percent={1} status="exception" />\n    </div>\n  )\n}'}},source:"Progress \u8fdb\u5ea6\u6761\n===\n\n[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-progress/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-progress.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-progress)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-progress.svg?label=@uiw/react-progress)](https://npmjs.com/@uiw/react-progress)\n\n\u7528\u4e8e\u5c55\u793a\u64cd\u4f5c\u8fdb\u5ea6\uff0c\u544a\u77e5\u7528\u6237\u5f53\u524d\u72b6\u6001\u548c\u9884\u671f\u3002\n\n```jsx\nimport { Progress } from 'uiw';\nconst { Line, Circle } = Progress;\n// or\nimport Progress from '@uiw/react-progress';\n```\n\n### \u57fa\u672c\u7528\u6cd5\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Progress } from 'uiw';\n\nconst { Line } = Progress;\nconst sty = {marginBottom:10}\n\nexport default function Demo() {\n  return (\n    <div>\n      <Progress.Line style={sty} percent={30} />\n      <Line style={sty} percent={50} status=\"active\" />\n      <Line style={sty} percent={70} status=\"exception\" />\n      <Line style={sty} percent={100} />\n      <Line style={sty} percent={50} showText={false} />\n    </div>\n  );\n}\n```\n\n### \u8fdb\u5ea6\u6761\u5927\u5c0f\u8bbe\u7f6e\n\n\u8bbe\u7f6e\u53c2\u6570`strokeWidth`\u5373\u53ef\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Progress } from 'uiw';\n\nconst { Line } = Progress;\nconst sty = {marginBottom:10}\n\nexport default function Demo() {\n  return (\n    <div>\n      <Progress.Line style={sty} strokeWidth={6} percent={30} />\n      <Line style={sty} strokeWidth={14} percent={50} status=\"active\" />\n      <Line style={sty} strokeWidth={18} percent={70} status=\"exception\" />\n      <Line style={sty} strokeWidth={12} percent={100} />\n      <Line style={sty} strokeWidth={14} percent={50} showText={false} />\n    </div>\n  );\n}\n```\n\n### \u5706\u5708\u8fdb\u5ea6\u6761\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Progress } from 'uiw';\n\nconst { Circle } = Progress;\nconst sty = {marginBottom:10}\n\nexport default function Demo() {\n  return (\n    <div>\n      <Progress.Circle style={sty} percent={30} />\n      <Circle style={sty} percent={75} />\n      <Circle style={sty} percent={70} status=\"exception\" />\n      <Circle style={sty} percent={100} />\n    </div>\n  );\n}\n```\n\n### \u4e0d\u540c\u5c3a\u5bf8\u5706\u5708\u8fdb\u5ea6\u6761\n\n\u901a\u8fc7`strokeWidth`\u8bbe\u7f6e\u5706\u5708\u8fdb\u5ea6\u5bbd\u5e26\uff0c\u901a\u8fc7`width`\uff08`type=\"circle\"`\u6709\u6548\uff09\u8bbe\u7f6e\u5706\u5708\u5927\u5c0f\uff0c\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Progress } from 'uiw';\n\nlet sty = {marginRight:15}\n\nexport default function Demo() {\n  return (\n    <div>\n      <Progress.Circle style={sty} width={80} strokeWidth={2} percent={30} />\n      <Progress.Circle style={sty} width={100} strokeWidth={10} percent={75} />\n      <Progress.Circle style={sty} percent={70} status=\"exception\" />\n      <Progress.Circle style={sty} width={100} strokeWidth={3} percent={75} />\n    </div>\n  );\n}\n```\n\n### \u52a8\u6001\u5c55\u793a\n\n\u8fdb\u5ea6\u6761\u52a8\u6001\u5c55\u793a\u66f4\u76f4\u89c2\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Progress } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor(props){\n    super(props);\n    this.state = {\n      percent: 50,\n    }\n  }\n  increase(){\n    let percent = this.state.percent + 10;\n    if (percent > 100) {\n      percent = 100;\n    }\n    this.setState({ percent });\n  }\n  decline(){\n    let percent = this.state.percent - 10;\n    if (percent < 0) {\n      percent = 0;\n    }\n    this.setState({ percent });\n  }\n  render() {\n    let sty = {marginRight:15}\n    return (\n      <div style={{maxWidth:400}}>\n        <Progress.Line percent={this.state.percent} />\n        <Progress.Circle percent={this.state.percent} />\n        <div>\n          <button onClick={this.decline.bind(this)}>minus -</button>\n          <button onClick={this.increase.bind(this)}>plus +</button>\n        </div>\n      </div>\n    )\n  }\n}\n\nexport default Demo;\n```\n\n## \u81ea\u5b9a\u4e49\u6587\u5b57\u683c\u5f0f\n\n`format` \u5c5e\u6027\u6307\u5b9a\u683c\u5f0f\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Progress } from 'uiw';\n\nconst sty = {marginRight:10}\n\nexport default function Demo() {\n  return (\n    <div>\n      <Progress.Circle style={sty} percent={80} type=\"circle\" format={percent => (\n          <span>\n            {`${percent} %`}\n            <div style={{padding:\"10px 0 0 0\",fontSize:21}}>\u5df2\u5b8c\u6210</div>\n          </span>\n        )}/>\n      <Progress.Circle style={sty} percent={70} status=\"exception\" type=\"circle\" format={percent => (\n        <span>\n          {`${percent} %`}\n          <div style={{padding:\"10px 0 0 0\",fontSize:21}}>\u5df2\u5173\u95ed</div>\n        </span>\n      )}/>\n      <Progress.Circle style={sty} percent={100} type=\"circle\" format={percent => `\u5df2\u5b8c\u6210`}/>\n      <Progress.Line style={sty} percent={70} format={percent => `${percent}\u2103`}/>\n      <Progress.Line strokeWidth={18} percent={1} status=\"exception\" />\n    </div>\n  )\n}\n```\n\n\n## API\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|------ |-------- |---------- |-------- |\n| percent | \u767e\u5206\u6bd4 | Number | `0` |\n| showText | \u662f\u5426\u663e\u793a\u8fdb\u5ea6\u6761\u6587\u5b57\u5185\u5bb9 | Boolean | `true` |\n| format | \u5185\u5bb9\u7684\u6a21\u677f\u51fd\u6570\uff0c\u81ea\u5b9a\u4e49\u6587\u5b57\u683c\u5f0f\u3002 | Function | - |\n| strokeWidth | \u8fdb\u5ea6\u6761\u7ebf\u7684\u5bbd\u5ea6 | Number | `6` |\n| width  | \u5706\u5f62\u8fdb\u5ea6\u6761\u753b\u5e03\u5bbd\u5ea6\uff0c\u5355\u4f4d px ,`type=\"circle\"`\u6709\u6548| Number | `126` |\n| status | \u72b6\u6001\uff0c\u53ef\u9009\uff1a`success` `exception` `active` | Enum{'`success`', '`exception`'} | - |\n",headings:[],headingsList:[]};var s=n(5301),o=n(4760);function i(){return(0,o.jsx)(s.Z,{...r,path:"https://github.com/uiwjs/uiw/tree/master/packages/react-progress/README.md"})}}}]);
//# sourceMappingURL=1350.ffe54612.chunk.js.map