@uiw/doc 5.0.0-bate-1 → 5.0.0-bate-4

package/web/static/js/8660.2ba0842f.chunk.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8660],{8660:function(e,t,n){n.r(t),t.default={components:{20:function(){var e,t=(e=n(8133))&&e.__esModule?e:{default:e},o=n(2814);return function(){return t.default.createElement("div",null,t.default.createElement(o.Radio,{value:"1"},"Radio"),t.default.createElement(o.Radio,{value:"2",checked:!0},"\u9009\u4e2d"),t.default.createElement(o.Radio,{value:"3",disabled:!0},"\u7981\u7528"),t.default.createElement(o.Radio,{value:"4",checked:!0,disabled:!0},"\u9009\u4e2d\u5e76\u7981\u7528"),t.default.createElement(o.Radio,{value:"4",checked:!0,disabled:!0},"\u9009\u4e2d\u5e76\u7981\u7528"),t.default.createElement(o.RadioButton,{value:"5"},"RadioButton"),t.default.createElement(o.RadioButton,{value:"5",checked:!0},"RadioButton \u9009\u4e2d"))}}(),40:function(){var e,t=(e=n(8133))&&e.__esModule?e:{default:e},o=n(2814);function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}return function(){return t.default.createElement(o.Form,{onChange:function(e){e.initial,e.current},resetOnSubmit:!1,onSubmitError:function(e){return e&&e.filed?function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},e.filed):null},onSubmit:function(e){e.initial;var t={};if("unknown"===e.current.radioGroup&&(t.radioGroup="\u8bf7\u9009\u62e9\u6027\u522b\uff01"),Object.keys(t).length>0){var n=new Error;throw n.filed=t,n}o.Notify.success({title:"\u63d0\u4ea4\u6210\u529f\uff01",description:"\u586b\u5199\uff1a\u3010\u586b\u5199\u6210\u529f\u3011\uff01"})},fields:{radioGroup:{value:"girl",label:"\u8bf7\u8f93\u5165\u5185\u5bb9",help:"\u5fc5\u987b\u9009\u62e9\u6027\u522b\uff01",children:t.default.createElement(o.RadioGroup,null,t.default.createElement(o.Radio,{value:"man"},"\u7537"),t.default.createElement(o.Radio,{value:"girl"},"\u5973"),t.default.createElement(o.Radio,{value:"shemale"},"\u4e2d\u6027"),t.default.createElement(o.Radio,{value:"unknown"},"\u672a\u77e5"))},radioButtonGroup:{value:"girl",label:"\u8bf7\u8f93\u5165\u5185\u5bb9",help:"\u5fc5\u987b\u9009\u62e9\u6027\u522b\uff01",children:t.default.createElement(o.RadioGroup,null,t.default.createElement(o.RadioButton,{value:"man"},"\u7537"),t.default.createElement(o.RadioButton,{value:"girl"},"\u5973"),t.default.createElement(o.RadioButton,{value:"shemale"},"\u4e2d\u6027"),t.default.createElement(o.RadioButton,{value:"unknown"},"\u672a\u77e5"))},radio:{help:"\u8bf7\u9009\u62e9\uff01\u8be5\u9009\u9879\u4e3a\u5fc5\u9009\uff01",validator:function(e){return e?null:"\u5fc5\u586b\u9009\u9879\uff01"},children:t.default.createElement(o.Radio,{value:"man"},"\u5df2\u9605\u8bfb")}}},(function(e){var n=e.fields,r=e.state,a=e.canSubmit;return t.default.createElement("div",null,t.default.createElement(o.Row,null,t.default.createElement(o.Col,null,n.radioGroup)),t.default.createElement(o.Row,null,t.default.createElement(o.Col,null,n.radioButtonGroup)),t.default.createElement(o.Row,null,t.default.createElement(o.Col,null,n.radio)),t.default.createElement(o.Row,null,t.default.createElement(o.Col,null,t.default.createElement(o.Button,{disabled:!a(),type:"primary",htmlType:"submit"},"\u63d0\u4ea4"))),t.default.createElement(o.Row,null,t.default.createElement(o.Col,null,t.default.createElement("pre",{style:{padding:10,marginTop:10}},JSON.stringify(r.current,null,2)))))}))}}(),136: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,o=(t=n(8133))&&t.__esModule?t:{default:t},r=n(2814);function a(e,t){if(n=e,!(null!=(o=t)&&"undefined"!==typeof Symbol&&o[Symbol.hasInstance]?o[Symbol.hasInstance](n):n instanceof o))throw new TypeError("Cannot call a class as a function");var n,o}function u(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function i(e,t){return i=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},i(e,t)}function l(e){var t=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 n,o=d(e);if(t){var r=d(this).constructor;n=Reflect.construct(o,arguments,r)}else n=o.apply(this,arguments);return c(this,n)}}function c(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)}function d(e){return d=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},d(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&&i(e,t)}(s,e);var t,n,c,d=l(s);function s(e){var t;return a(this,s),(t=d.call(this,e)).state={value:"\u672a\u77e5"},t}return t=s,(n=[{key:"onChange",value:function(e){this.setState({value:e})}},{key:"render",value:function(){var e=this;return o.default.createElement("div",null,o.default.createElement(r.RadioGroup,{name:"sexs",value:this.state.value,onChange:function(t){return e.onChange(t.target.value)}},o.default.createElement(r.Radio,{value:"man"},"\u7537"),o.default.createElement(r.Radio,{value:"girl"},"\u5973"),o.default.createElement(r.Radio,{value:"shemale",disabled:!0},"\u4e2d\u6027"),o.default.createElement(r.Radio,{value:"unknown",disabled:!0},"\u672a\u77e5")),o.default.createElement(r.RadioGroup,{name:"sexs",value:this.state.value,onChange:this.onChange.bind(this),style:{marginTop:20}},o.default.createElement(r.RadioButton,{value:"man"},"\u7537"),o.default.createElement(r.RadioButton,{value:"girl"},"\u5973"),o.default.createElement(r.RadioButton,{value:"shemale",disabled:!0},"\u4e2d\u6027"),o.default.createElement(r.RadioButton,{value:"unknown",disabled:!0},"\u672a\u77e5")))}}])&&u(t.prototype,n),c&&u(t,c),Object.defineProperty(t,"prototype",{writable:!1}),s}(o.default.Component)}(),174: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,o=(t=n(8133))&&t.__esModule?t:{default:t},r=n(2814);function a(e,t){if(n=e,!(null!=(o=t)&&"undefined"!==typeof Symbol&&o[Symbol.hasInstance]?o[Symbol.hasInstance](n):n instanceof o))throw new TypeError("Cannot call a class as a function");var n,o}function u(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function i(e,t){return i=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},i(e,t)}function l(e){var t=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 n,o=d(e);if(t){var r=d(this).constructor;n=Reflect.construct(o,arguments,r)}else n=o.apply(this,arguments);return c(this,n)}}function c(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)}function d(e){return d=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},d(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&&i(e,t)}(s,e);var t,n,c,d=l(s);function s(e){var t;return a(this,s),(t=d.call(this,e)).state={value:"\u672a\u77e5"},t}return t=s,(n=[{key:"onChange",value:function(e){this.setState({value:e})}},{key:"render",value:function(){var e=this;return o.default.createElement("div",null,o.default.createElement(r.RadioGroup,{name:"other",value:this.state.value,onChange:function(t){return e.onChange(t.target.value)}},o.default.createElement("div",null,"Group 1"),o.default.createElement(r.Radio,{value:"\u7537"},"\u7537"),o.default.createElement(r.Radio,{value:"\u5973"},"\u5973"),o.default.createElement("div",null,"Group 2"),o.default.createElement(r.Radio,{value:"\u4e2d\u6027",disabled:!0},"\u4e2d\u6027"),o.default.createElement(r.Radio,{value:"\u672a\u77e5"},"\u672a\u77e5"),o.default.createElement("div",null,"Group 3"),o.default.createElement(r.Radio,{value:"E",style:{display:"block"}},"Item E"),o.default.createElement(r.Radio,{value:"F",style:{display:"block"}},"Item F"),o.default.createElement("div",null,"Group 3")),o.default.createElement(r.RadioGroup,{name:"other",value:this.state.value,onChange:this.onChange.bind(this),style:{marginTop:20}},o.default.createElement(r.RadioButton,{value:"\u7537"},"\u7537"),o.default.createElement(r.RadioButton,{value:"\u5973"},"\u5973"),o.default.createElement(r.RadioButton,{value:"\u672a\u77e5"},"\u672a\u77e5")),o.default.createElement(r.Divider,null),o.default.createElement(r.Button,{type:"primary",onClick:function(){e.setState({value:"\u5973"})}},'\u70b9\u51fb\u6309\u94ae\u9009"\u5973"'))}}])&&u(t.prototype,n),c&&u(t,c),Object.defineProperty(t,"prototype",{writable:!1}),s}(o.default.Component)}()},data:{20:{name:20,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n    value: "1"\n  }, "Radio"), /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n    value: "2",\n    checked: true\n  }, "\\u9009\\u4E2D"), /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n    value: "3",\n    disabled: true\n  }, "\\u7981\\u7528"), /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n    value: "4",\n    checked: true,\n    disabled: true\n  }, "\\u9009\\u4E2D\\u5E76\\u7981\\u7528"), /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n    value: "4",\n    checked: true,\n    disabled: true\n  }, "\\u9009\\u4E2D\\u5E76\\u7981\\u7528"), /*#__PURE__*/_react["default"].createElement(_uiw.RadioButton, {\n    value: "5"\n  }, "RadioButton"), /*#__PURE__*/_react["default"].createElement(_uiw.RadioButton, {\n    value: "5",\n    checked: true\n  }, "RadioButton \\u9009\\u4E2D"));\n};\n\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Radio, RadioButton } from \'uiw\';\n\nconst Demo = () => (\n  <div>\n    <Radio value="1">Radio</Radio>\n    <Radio value="2" checked>\u9009\u4e2d</Radio>\n    <Radio value="3" disabled>\u7981\u7528</Radio>\n    <Radio value="4" checked disabled>\u9009\u4e2d\u5e76\u7981\u7528</Radio>\n    <Radio value="4" checked disabled>\u9009\u4e2d\u5e76\u7981\u7528</Radio>\n    <RadioButton value="5" >RadioButton</RadioButton>\n    <RadioButton value="5" checked >RadioButton \u9009\u4e2d</RadioButton>\n  </div>\n);\nexport default Demo'},40:{name:40,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_uiw.Form, {\n    onChange: function onChange(_ref) {\n      var initial = _ref.initial,\n          current = _ref.current;\n    },\n    resetOnSubmit: false,\n    onSubmitError: function onSubmitError(error) {\n      return error && error.filed ? _objectSpread({}, error.filed) : null;\n    },\n    onSubmit: function onSubmit(_ref2) {\n      var initial = _ref2.initial,\n          current = _ref2.current;\n      var ErrObj = {};\n\n      if (current.radioGroup === \'unknown\') {\n        ErrObj.radioGroup = \'\u8bf7\u9009\u62e9\u6027\u522b\uff01\';\n      }\n\n      if (Object.keys(ErrObj).length > 0) {\n        var err = new Error();\n        err.filed = ErrObj;\n        throw err;\n      }\n\n      _uiw.Notify.success({\n        title: \'\u63d0\u4ea4\u6210\u529f\uff01\',\n        description: "\\u586B\\u5199\\uFF1A\\u3010\\u586B\\u5199\\u6210\\u529F\\u3011\\uFF01"\n      });\n    },\n    fields: {\n      radioGroup: {\n        value: \'girl\',\n        label: \'\u8bf7\u8f93\u5165\u5185\u5bb9\',\n        help: \'\u5fc5\u987b\u9009\u62e9\u6027\u522b\uff01\',\n        children: /*#__PURE__*/_react["default"].createElement(_uiw.RadioGroup, null, /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n          value: "man"\n        }, "\\u7537"), /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n          value: "girl"\n        }, "\\u5973"), /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n          value: "shemale"\n        }, "\\u4E2D\\u6027"), /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n          value: "unknown"\n        }, "\\u672A\\u77E5"))\n      },\n      radioButtonGroup: {\n        value: \'girl\',\n        label: \'\u8bf7\u8f93\u5165\u5185\u5bb9\',\n        help: \'\u5fc5\u987b\u9009\u62e9\u6027\u522b\uff01\',\n        children: /*#__PURE__*/_react["default"].createElement(_uiw.RadioGroup, null, /*#__PURE__*/_react["default"].createElement(_uiw.RadioButton, {\n          value: "man"\n        }, "\\u7537"), /*#__PURE__*/_react["default"].createElement(_uiw.RadioButton, {\n          value: "girl"\n        }, "\\u5973"), /*#__PURE__*/_react["default"].createElement(_uiw.RadioButton, {\n          value: "shemale"\n        }, "\\u4E2D\\u6027"), /*#__PURE__*/_react["default"].createElement(_uiw.RadioButton, {\n          value: "unknown"\n        }, "\\u672A\\u77E5"))\n      },\n      radio: {\n        help: \'\u8bf7\u9009\u62e9\uff01\u8be5\u9009\u9879\u4e3a\u5fc5\u9009\uff01\',\n        validator: function validator(value) {\n          return !value ? \'\u5fc5\u586b\u9009\u9879\uff01\' : null;\n        },\n        children: /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n          value: "man"\n        }, "\\u5DF2\\u9605\\u8BFB")\n      }\n    }\n  }, function (_ref3) {\n    var fields = _ref3.fields,\n        state = _ref3.state,\n        canSubmit = _ref3.canSubmit;\n    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, fields.radioGroup)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, fields.radioButtonGroup)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, fields.radio)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n      disabled: !canSubmit(),\n      type: "primary",\n      htmlType: "submit"\n    }, "\\u63D0\\u4EA4"))), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, /*#__PURE__*/_react["default"].createElement("pre", {\n      style: {\n        padding: 10,\n        marginTop: 10\n      }\n    }, JSON.stringify(state.current, null, 2)))));\n  });\n};\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Form, Radio, RadioGroup, RadioButton, Row, Col, Button, Notify } from 'uiw';\n\nconst Demo = () => (\n  <Form\n    onChange={({ initial, current }) => {}}\n    resetOnSubmit={false}\n    onSubmitError={(error) => error && error.filed ? { ...error.filed } : null}\n    onSubmit={({initial, current}) => {\n      const ErrObj = {};\n      if (current.radioGroup === 'unknown') {\n        ErrObj.radioGroup = '\u8bf7\u9009\u62e9\u6027\u522b\uff01';\n      }\n\n      if(Object.keys(ErrObj).length > 0) {\n        const err = new Error();\n        err.filed = ErrObj;\n        throw err;\n      }\n\n      Notify.success({\n        title: '\u63d0\u4ea4\u6210\u529f\uff01', description: `\u586b\u5199\uff1a\u3010\u586b\u5199\u6210\u529f\u3011\uff01`\n      });\n    }}\n    fields={{\n      radioGroup: {\n        value: 'girl',\n        label: '\u8bf7\u8f93\u5165\u5185\u5bb9',\n        help: '\u5fc5\u987b\u9009\u62e9\u6027\u522b\uff01',\n        children: (\n          <RadioGroup>\n            <Radio value=\"man\">\u7537</Radio>\n            <Radio value=\"girl\">\u5973</Radio>\n            <Radio value=\"shemale\">\u4e2d\u6027</Radio>\n            <Radio value=\"unknown\">\u672a\u77e5</Radio>\n          </RadioGroup>\n        ),\n      },\n      radioButtonGroup: {\n        value: 'girl',\n        label: '\u8bf7\u8f93\u5165\u5185\u5bb9',\n        help: '\u5fc5\u987b\u9009\u62e9\u6027\u522b\uff01',\n        children: (\n          <RadioGroup>\n            <RadioButton value=\"man\">\u7537</RadioButton>\n            <RadioButton value=\"girl\">\u5973</RadioButton>\n            <RadioButton value=\"shemale\">\u4e2d\u6027</RadioButton>\n            <RadioButton value=\"unknown\">\u672a\u77e5</RadioButton>\n          </RadioGroup>\n        ),\n      },\n      radio: {\n        help: '\u8bf7\u9009\u62e9\uff01\u8be5\u9009\u9879\u4e3a\u5fc5\u9009\uff01',\n        validator: (value) => !value ? '\u5fc5\u586b\u9009\u9879\uff01' : null,\n        children: <Radio value=\"man\">\u5df2\u9605\u8bfb</Radio>,\n      },\n    }}\n  >\n    {({ fields, state, canSubmit }) => {\n      return (\n        <div>\n          <Row>\n            <Col>{fields.radioGroup}</Col>\n          </Row>\n          <Row>\n            <Col>{fields.radioButtonGroup}</Col>\n          </Row>\n          <Row>\n            <Col>{fields.radio}</Col>\n          </Row>\n          <Row>\n            <Col>\n              <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n            </Col>\n          </Row>\n          <Row>\n            <Col>\n              <pre style={{ padding: 10, marginTop: 10 }}>\n                {JSON.stringify(state.current, null, 2)}\n              </pre>\n            </Col>\n          </Row>\n        </div>\n      );\n    }}\n  </Form>\n);\n\nexport default Demo"},136:{name:136,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},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; } }\n\nfunction _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\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, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\n\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); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\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); }; }\n\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); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\n\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; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nvar Demo = /*#__PURE__*/function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  var _super = _createSuper(Demo);\n\n  function Demo(props) {\n    var _this;\n\n    _classCallCheck(this, Demo);\n\n    _this = _super.call(this, props);\n    _this.state = {\n      value: \'\u672a\u77e5\'\n    };\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: "onChange",\n    value: function onChange(value) {\n      this.setState({\n        value: value\n      });\n    }\n  }, {\n    key: "render",\n    value: function render() {\n      var _this2 = this;\n\n      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.RadioGroup, {\n        name: "sexs",\n        value: this.state.value,\n        onChange: function onChange(e) {\n          return _this2.onChange(e.target.value);\n        }\n      }, /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n        value: "man"\n      }, "\\u7537"), /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n        value: "girl"\n      }, "\\u5973"), /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n        value: "shemale",\n        disabled: true\n      }, "\\u4E2D\\u6027"), /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n        value: "unknown",\n        disabled: true\n      }, "\\u672A\\u77E5")), /*#__PURE__*/_react["default"].createElement(_uiw.RadioGroup, {\n        name: "sexs",\n        value: this.state.value,\n        onChange: this.onChange.bind(this),\n        style: {\n          marginTop: 20\n        }\n      }, /*#__PURE__*/_react["default"].createElement(_uiw.RadioButton, {\n        value: "man"\n      }, "\\u7537"), /*#__PURE__*/_react["default"].createElement(_uiw.RadioButton, {\n        value: "girl"\n      }, "\\u5973"), /*#__PURE__*/_react["default"].createElement(_uiw.RadioButton, {\n        value: "shemale",\n        disabled: true\n      }, "\\u4E2D\\u6027"), /*#__PURE__*/_react["default"].createElement(_uiw.RadioButton, {\n        value: "unknown",\n        disabled: true\n      }, "\\u672A\\u77E5")));\n    }\n  }]);\n\n  return Demo;\n}(_react["default"].Component);\n\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Radio, RadioGroup, RadioButton } from \'uiw\';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { value: \'\u672a\u77e5\' };\n  }\n  onChange(value) {\n    this.setState({ value });\n  }\n  render() {\n    return (\n      <div>\n        <RadioGroup name="sexs" value={this.state.value} onChange={(e)=>this.onChange(e.target.value)}>\n          <Radio value="man">\u7537</Radio>\n          <Radio value="girl">\u5973</Radio>\n          <Radio value="shemale" disabled>\u4e2d\u6027</Radio>\n          <Radio value="unknown" disabled>\u672a\u77e5</Radio>\n        </RadioGroup>\n        <RadioGroup name="sexs" value={this.state.value} onChange={this.onChange.bind(this)} style={{ marginTop: 20 }}>\n          <RadioButton value="man">\u7537</RadioButton>\n          <RadioButton value="girl">\u5973</RadioButton>\n          <RadioButton value="shemale" disabled>\u4e2d\u6027</RadioButton>\n          <RadioButton value="unknown" disabled>\u672a\u77e5</RadioButton>\n        </RadioGroup>\n      </div>\n    )\n  }\n}\nexport default Demo'},174:{name:174,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},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; } }\n\nfunction _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\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, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\n\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); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\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); }; }\n\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); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\n\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; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nvar Demo = /*#__PURE__*/function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  var _super = _createSuper(Demo);\n\n  function Demo(props) {\n    var _this;\n\n    _classCallCheck(this, Demo);\n\n    _this = _super.call(this, props);\n    _this.state = {\n      value: \'\u672a\u77e5\'\n    };\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: "onChange",\n    value: function onChange(value) {\n      this.setState({\n        value: value\n      });\n    }\n  }, {\n    key: "render",\n    value: function render() {\n      var _this2 = this;\n\n      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.RadioGroup, {\n        name: "other",\n        value: this.state.value,\n        onChange: function onChange(e) {\n          return _this2.onChange(e.target.value);\n        }\n      }, /*#__PURE__*/_react["default"].createElement("div", null, "Group 1"), /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n        value: "\\u7537"\n      }, "\\u7537"), /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n        value: "\\u5973"\n      }, "\\u5973"), /*#__PURE__*/_react["default"].createElement("div", null, "Group 2"), /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n        value: "\\u4E2D\\u6027",\n        disabled: true\n      }, "\\u4E2D\\u6027"), /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n        value: "\\u672A\\u77E5"\n      }, "\\u672A\\u77E5"), /*#__PURE__*/_react["default"].createElement("div", null, "Group 3"), /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n        value: "E",\n        style: {\n          display: \'block\'\n        }\n      }, "Item E"), /*#__PURE__*/_react["default"].createElement(_uiw.Radio, {\n        value: "F",\n        style: {\n          display: \'block\'\n        }\n      }, "Item F"), /*#__PURE__*/_react["default"].createElement("div", null, "Group 3")), /*#__PURE__*/_react["default"].createElement(_uiw.RadioGroup, {\n        name: "other",\n        value: this.state.value,\n        onChange: this.onChange.bind(this),\n        style: {\n          marginTop: 20\n        }\n      }, /*#__PURE__*/_react["default"].createElement(_uiw.RadioButton, {\n        value: "\\u7537"\n      }, "\\u7537"), /*#__PURE__*/_react["default"].createElement(_uiw.RadioButton, {\n        value: "\\u5973"\n      }, "\\u5973"), /*#__PURE__*/_react["default"].createElement(_uiw.RadioButton, {\n        value: "\\u672A\\u77E5"\n      }, "\\u672A\\u77E5")), /*#__PURE__*/_react["default"].createElement(_uiw.Divider, null), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n        type: "primary",\n        onClick: function onClick() {\n          // console.log(\'set::\', [\'\u4e1c\u5317\u83dc\', \'\u5317\u4eac\u70e4\u9e2d\']);\n          _this2.setState({\n            value: \'\u5973\'\n          });\n        }\n      }, "\\u70B9\\u51FB\\u6309\\u94AE\\u9009\\"\\u5973\\""));\n    }\n  }]);\n\n  return Demo;\n}(_react["default"].Component);\n\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Radio, RadioGroup, Divider, Button,RadioButton } from \'uiw\';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { value: \'\u672a\u77e5\' };\n  }\n  onChange(value) {\n    this.setState({ value });\n  }\n  render() {\n    return (\n      <div>\n        <RadioGroup name="other" value={this.state.value} onChange={(e)=>this.onChange(e.target.value)}>\n          <div>Group 1</div>\n          <Radio value="\u7537">\u7537</Radio>\n          <Radio value="\u5973">\u5973</Radio>\n          <div>Group 2</div>\n          <Radio value="\u4e2d\u6027" disabled>\u4e2d\u6027</Radio>\n          <Radio value="\u672a\u77e5">\u672a\u77e5</Radio>\n          <div>Group 3</div>\n          <Radio value="E" style={{ display: \'block\' }}>Item E</Radio>\n          <Radio value="F" style={{ display: \'block\' }}>Item F</Radio>\n          <div>Group 3</div>\n        </RadioGroup>\n\n        <RadioGroup name="other" value={this.state.value} onChange={this.onChange.bind(this)} style={{ marginTop:20 }}>\n          <RadioButton value="\u7537">\u7537</RadioButton>\n          <RadioButton value="\u5973">\u5973</RadioButton>\n          <RadioButton value="\u672a\u77e5">\u672a\u77e5</RadioButton>\n        </RadioGroup>\n        <Divider />\n        <Button\n          type="primary"\n          onClick={() => {\n            // console.log(\'set::\', [\'\u4e1c\u5317\u83dc\', \'\u5317\u4eac\u70e4\u9e2d\']);\n            this.setState({ value: \'\u5973\' });\n          }}\n        >\n          \u70b9\u51fb\u6309\u94ae\u9009"\u5973"\n        </Button>\n      </div>\n    )\n  }\n}\nexport default Demo'}},source:'Radio \u5355\u9009\u6846\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-radio/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-radio.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-radio)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-radio.svg?label=@uiw/react-radio)](https://npmjs.com/@uiw/react-radio)\n\n\u5355\u9009\u6846\uff0c\u5728\u4e00\u7ec4\u5907\u9009\u9879\u4e2d\u8fdb\u884c\u5355\u9009\u3002\n\n```jsx\nimport { Radio, RadioButton, RadioGroup } from \'uiw\';\n// or\nimport { Radio, RadioButton, RadioGroup } from \'@uiw/react-radio\';\n```\n\n### \u57fa\u7840\u7528\u6cd5\n\n\u9002\u7528\u5e7f\u6cdb\u7684\u57fa\u7840\u6700\u7b80\u5355\u7684\u7528\u6cd5\uff0c\u5c55\u793a\u5404\u79cd\u72b6\u6001\u4e0b\u7684\u6837\u5f0f\u3002\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \'react\';\nimport { Radio, RadioButton } from \'uiw\';\n\nconst Demo = () => (\n  <div>\n    <Radio value="1">Radio</Radio>\n    <Radio value="2" checked>\u9009\u4e2d</Radio>\n    <Radio value="3" disabled>\u7981\u7528</Radio>\n    <Radio value="4" checked disabled>\u9009\u4e2d\u5e76\u7981\u7528</Radio>\n    <Radio value="4" checked disabled>\u9009\u4e2d\u5e76\u7981\u7528</Radio>\n    <RadioButton value="5" >RadioButton</RadioButton>\n    <RadioButton value="5" checked >RadioButton \u9009\u4e2d</RadioButton>\n  </div>\n);\nexport default Demo\n```\n\n### Form \u4e2d\u4f7f\u7528 Radio\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \'react\';\nimport { Form, Radio, RadioGroup, RadioButton, Row, Col, Button, Notify } from \'uiw\';\n\nconst Demo = () => (\n  <Form\n    onChange={({ initial, current }) => {}}\n    resetOnSubmit={false}\n    onSubmitError={(error) => error && error.filed ? { ...error.filed } : null}\n    onSubmit={({initial, current}) => {\n      const ErrObj = {};\n      if (current.radioGroup === \'unknown\') {\n        ErrObj.radioGroup = \'\u8bf7\u9009\u62e9\u6027\u522b\uff01\';\n      }\n\n      if(Object.keys(ErrObj).length > 0) {\n        const err = new Error();\n        err.filed = ErrObj;\n        throw err;\n      }\n\n      Notify.success({\n        title: \'\u63d0\u4ea4\u6210\u529f\uff01\', description: `\u586b\u5199\uff1a\u3010\u586b\u5199\u6210\u529f\u3011\uff01`\n      });\n    }}\n    fields={{\n      radioGroup: {\n        value: \'girl\',\n        label: \'\u8bf7\u8f93\u5165\u5185\u5bb9\',\n        help: \'\u5fc5\u987b\u9009\u62e9\u6027\u522b\uff01\',\n        children: (\n          <RadioGroup>\n            <Radio value="man">\u7537</Radio>\n            <Radio value="girl">\u5973</Radio>\n            <Radio value="shemale">\u4e2d\u6027</Radio>\n            <Radio value="unknown">\u672a\u77e5</Radio>\n          </RadioGroup>\n        ),\n      },\n      radioButtonGroup: {\n        value: \'girl\',\n        label: \'\u8bf7\u8f93\u5165\u5185\u5bb9\',\n        help: \'\u5fc5\u987b\u9009\u62e9\u6027\u522b\uff01\',\n        children: (\n          <RadioGroup>\n            <RadioButton value="man">\u7537</RadioButton>\n            <RadioButton value="girl">\u5973</RadioButton>\n            <RadioButton value="shemale">\u4e2d\u6027</RadioButton>\n            <RadioButton value="unknown">\u672a\u77e5</RadioButton>\n          </RadioGroup>\n        ),\n      },\n      radio: {\n        help: \'\u8bf7\u9009\u62e9\uff01\u8be5\u9009\u9879\u4e3a\u5fc5\u9009\uff01\',\n        validator: (value) => !value ? \'\u5fc5\u586b\u9009\u9879\uff01\' : null,\n        children: <Radio value="man">\u5df2\u9605\u8bfb</Radio>,\n      },\n    }}\n  >\n    {({ fields, state, canSubmit }) => {\n      return (\n        <div>\n          <Row>\n            <Col>{fields.radioGroup}</Col>\n          </Row>\n          <Row>\n            <Col>{fields.radioButtonGroup}</Col>\n          </Row>\n          <Row>\n            <Col>{fields.radio}</Col>\n          </Row>\n          <Row>\n            <Col>\n              <Button disabled={!canSubmit()} type="primary" htmlType="submit">\u63d0\u4ea4</Button>\n            </Col>\n          </Row>\n          <Row>\n            <Col>\n              <pre style={{ padding: 10, marginTop: 10 }}>\n                {JSON.stringify(state.current, null, 2)}\n              </pre>\n            </Col>\n          </Row>\n        </div>\n      );\n    }}\n  </Form>\n);\n\nexport default Demo\n```\n\n### \u5355\u9009\n\n\u9002\u7528\u5e7f\u6cdb\u7684\u57fa\u7840\u6700\u7b80\u5355\u7684\u7528\u6cd5\u3002\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \'react\';\nimport { Radio, RadioGroup, RadioButton } from \'uiw\';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { value: \'\u672a\u77e5\' };\n  }\n  onChange(value) {\n    this.setState({ value });\n  }\n  render() {\n    return (\n      <div>\n        <RadioGroup name="sexs" value={this.state.value} onChange={(e)=>this.onChange(e.target.value)}>\n          <Radio value="man">\u7537</Radio>\n          <Radio value="girl">\u5973</Radio>\n          <Radio value="shemale" disabled>\u4e2d\u6027</Radio>\n          <Radio value="unknown" disabled>\u672a\u77e5</Radio>\n        </RadioGroup>\n        <RadioGroup name="sexs" value={this.state.value} onChange={this.onChange.bind(this)} style={{ marginTop: 20 }}>\n          <RadioButton value="man">\u7537</RadioButton>\n          <RadioButton value="girl">\u5973</RadioButton>\n          <RadioButton value="shemale" disabled>\u4e2d\u6027</RadioButton>\n          <RadioButton value="unknown" disabled>\u672a\u77e5</RadioButton>\n        </RadioGroup>\n      </div>\n    )\n  }\n}\nexport default Demo\n```\n\n### \u5355\u9009\u7ec4\n\n\u8bbe\u7f6e\u5355\u9009\u521d\u59cb\u503c\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \'react\';\nimport { Radio, RadioGroup, Divider, Button,RadioButton } from \'uiw\';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { value: \'\u672a\u77e5\' };\n  }\n  onChange(value) {\n    this.setState({ value });\n  }\n  render() {\n    return (\n      <div>\n        <RadioGroup name="other" value={this.state.value} onChange={(e)=>this.onChange(e.target.value)}>\n          <div>Group 1</div>\n          <Radio value="\u7537">\u7537</Radio>\n          <Radio value="\u5973">\u5973</Radio>\n          <div>Group 2</div>\n          <Radio value="\u4e2d\u6027" disabled>\u4e2d\u6027</Radio>\n          <Radio value="\u672a\u77e5">\u672a\u77e5</Radio>\n          <div>Group 3</div>\n          <Radio value="E" style={{ display: \'block\' }}>Item E</Radio>\n          <Radio value="F" style={{ display: \'block\' }}>Item F</Radio>\n          <div>Group 3</div>\n        </RadioGroup>\n\n        <RadioGroup name="other" value={this.state.value} onChange={this.onChange.bind(this)} style={{ marginTop:20 }}>\n          <RadioButton value="\u7537">\u7537</RadioButton>\n          <RadioButton value="\u5973">\u5973</RadioButton>\n          <RadioButton value="\u672a\u77e5">\u672a\u77e5</RadioButton>\n        </RadioGroup>\n        <Divider />\n        <Button\n          type="primary"\n          onClick={() => {\n            // console.log(\'set::\', [\'\u4e1c\u5317\u83dc\', \'\u5317\u4eac\u70e4\u9e2d\']);\n            this.setState({ value: \'\u5973\' });\n          }}\n        >\n          \u70b9\u51fb\u6309\u94ae\u9009"\u5973"\n        </Button>\n      </div>\n    )\n  }\n}\nexport default Demo\n```\n\n## Radio\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| value | \u6839\u636e value \u8fdb\u884c\u6bd4\u8f83\uff0c\u5224\u65ad\u662f\u5426\u9009\u4e2d | String/Number/Boolean | - |\n| name | \u7528\u4e8e\u8868\u5355\u5bf9\u5e94\u7684\u540d\u79f0 | String | - |\n| checked | Radio\u662f\u5426\u88ab\u9009\u4e2d | Boolean | `false` |\n| disabled | \u662f\u5426\u7981\u7528 | Boolean | `false` |\n| onChange | \u6570\u503c\u6539\u53d8\u65f6\u7684\u56de\u8c03\uff0c\u8fd4\u56de\u5f53\u524d\u503c | Funtcion(e:Even) | - |\n\n## RadioGroup\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| value | \u6839\u636e value \u8fdb\u884c\u6bd4\u8f83\uff0c\u5224\u65ad\u662f\u5426\u9009\u4e2d | String/Number/Boolean | - |\n| name | \u7528\u4e8e\u8868\u5355\u5bf9\u5e94\u7684\u540d\u79f0 | String | - |\n| onChange | \u6570\u503c\u6539\u53d8\u65f6\u7684\u56de\u8c03\uff0c\u8fd4\u56de\u5f53\u524d\u503c | Funtcion(e:Even) | - |\n'}}}]);
-//# sourceMappingURL=8660.2ba0842f.chunk.js.map

package/web/static/js/8763.a8c2f646.chunk.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8763],{8763:function(t,e,n){n.r(e),e.default={components:{20:function(){var t,e=(t=n(8133))&&t.__esModule?t:{default:t},o=n(2814);return function(){return e.default.createElement("div",null,e.default.createElement(o.Tooltip,{placement:"right",content:"\u53f3\u8fb9\u6587\u5b57\u63d0\u793a"},e.default.createElement(o.Button,null,"\u53f3\u8fb9\u6587\u5b57\u63d0\u793a(right)")),e.default.createElement(o.Tooltip,{placement:"top",content:"\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a"},e.default.createElement(o.Button,null,"\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a(top)")),e.default.createElement(o.Tooltip,{placement:"left",content:"\u5de6\u8fb9\u6587\u5b57\u63d0\u793a"},e.default.createElement(o.Button,null,"\u5de6\u8fb9\u6587\u5b57\u63d0\u793a(left)")),e.default.createElement(o.Tooltip,{placement:"bottom",content:"\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a"},e.default.createElement(o.Button,null,"\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a(bottom)")),e.default.createElement(o.Tooltip,{placement:"top",content:"\u5df2\u88ab\u7981\u7528"},e.default.createElement(o.Button,{disabled:!0},"\u7981\u7528")))}}(),50:function(){var t,e=(t=n(8133))&&t.__esModule?t:{default:t},o=n(2814);function l(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function r(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?l(Object(n),!0).forEach((function(e){u(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function u(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var a={position:"relative",width:70};return function(){return e.default.createElement("div",null,e.default.createElement(o.Tooltip,{placement:"left",content:e.default.createElement("strong",null,"Hello uiw!")},e.default.createElement(o.Button,{type:"primary"},"\u5de6\u8fb9\u6587\u5b57\u63d0\u793a(left)")),e.default.createElement(o.Tooltip,{placement:"top",content:e.default.createElement("strong",null,"Hello uiw!")},e.default.createElement(o.Button,{type:"primary"},"\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a(top)")),e.default.createElement(o.Tooltip,{placement:"bottom",content:e.default.createElement("strong",null,"Hello uiw!")},e.default.createElement(o.Button,{type:"primary"},"\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a(bottom)")),e.default.createElement(o.Tooltip,{placement:"right",content:e.default.createElement("strong",null,"Hello uiw!")},e.default.createElement(o.Button,{type:"primary"},"\u53f3\u8fb9\u6587\u5b57\u63d0\u793a(right)")),e.default.createElement(o.Divider,null),e.default.createElement("div",{style:{position:"relative"}},e.default.createElement(o.Tooltip,{placement:"topLeft",content:e.default.createElement("strong",null,"Hello uiw!")},e.default.createElement(o.Button,{style:r(r({},a),{},{left:70})},"TL")),e.default.createElement(o.Tooltip,{placement:"top",content:e.default.createElement("strong",null,"Hello uiw!")},e.default.createElement(o.Button,{style:r(r({},a),{},{left:70})},"Top")),e.default.createElement(o.Tooltip,{placement:"topRight",content:e.default.createElement("strong",null,"Hello uiw!")},e.default.createElement(o.Button,{style:r(r({},a),{},{left:70})},"TR"))),e.default.createElement("div",{style:{position:"relative",paddingTop:10}},e.default.createElement(o.Tooltip,{placement:"leftTop",content:e.default.createElement("span",null,e.default.createElement("strong",null,"Hello uiw!")," \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002")},e.default.createElement(o.Button,{style:r({},a)},"LT")),e.default.createElement(o.Tooltip,{placement:"rightTop",content:e.default.createElement("span",null,e.default.createElement("strong",null,"Hello uiw!")," \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002")},e.default.createElement(o.Button,{style:r(r({},a),{},{left:216})},"RT"))),e.default.createElement("div",{style:{position:"relative",paddingTop:10}},e.default.createElement(o.Tooltip,{placement:"left",content:e.default.createElement("span",null,e.default.createElement("strong",null,"Hello uiw!")," \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002")},e.default.createElement(o.Button,{style:r({},a)},"Left")),e.default.createElement(o.Tooltip,{placement:"right",content:e.default.createElement("span",null,e.default.createElement("strong",null,"Hello uiw!")," \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002")},e.default.createElement(o.Button,{style:r(r({},a),{},{left:216})},"Right"))),e.default.createElement("div",{style:{position:"relative",paddingTop:10}},e.default.createElement(o.Tooltip,{placement:"leftBottom",content:e.default.createElement("span",null,e.default.createElement("strong",null,"Hello uiw!")," \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002")},e.default.createElement(o.Button,{style:r({},a)},"LB")),e.default.createElement(o.Tooltip,{placement:"rightBottom",content:e.default.createElement("span",null,e.default.createElement("strong",null,"Hello uiw!")," \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002")},e.default.createElement(o.Button,{style:r(r({},a),{},{left:216})},"RB"))),e.default.createElement("div",{style:{position:"relative",paddingTop:10}},e.default.createElement(o.Tooltip,{placement:"bottomLeft",content:e.default.createElement("span",null,e.default.createElement("strong",null,"Hello uiw!")," \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002")},e.default.createElement(o.Button,{style:r(r({},a),{},{left:70})},"BL")),e.default.createElement(o.Tooltip,{placement:"bottom",content:e.default.createElement("span",null,e.default.createElement("strong",null,"Hello uiw!")," \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002")},e.default.createElement(o.Button,{style:r(r({},a),{},{left:70})},"Bottom")),e.default.createElement(o.Tooltip,{placement:"bottomRight",content:e.default.createElement("span",null,e.default.createElement("strong",null,"Hello uiw!")," \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002")},e.default.createElement(o.Button,{style:r(r({},a),{},{left:70})},"BR"))))}}(),130:function(){var t,e=(t=n(8133))&&t.__esModule?t:{default:t},o=n(2814);return function(){return e.default.createElement("div",null,e.default.createElement(o.Tooltip,{trigger:"hover",placement:"top",content:"Hello uiw!"},e.default.createElement(o.Button,{type:"primary"},"\u60ac\u6d6e\u5f39\u51fa\u6587\u5b57\u63d0\u793a(top)")),e.default.createElement(o.Tooltip,{trigger:"click",placement:"top",content:"Hello uiw!"},e.default.createElement(o.Button,{type:"success"},"\u70b9\u51fb\u5f39\u51fa\u63d0\u793a(top)")))}}(),153:function(){var t,e=(t=n(8133))&&t.__esModule?t:{default:t},o=n(2814);return function(){return e.default.createElement("div",null,e.default.createElement(o.Tooltip,{visibleArrow:!1,trigger:"hover",placement:"top",content:"Hello uiw!"},e.default.createElement(o.Button,{type:"primary"},"\u60ac\u6d6e\u5f39\u51fa\u6587\u5b57\u63d0\u793a(top)")),e.default.createElement(o.Tooltip,{visibleArrow:!1,trigger:"click",placement:"right",content:"Hello uiw!"},e.default.createElement(o.Button,{type:"success"},"\u70b9\u51fb\u5f39\u51fa\u63d0\u793a(right)")))}}(),174:function(){function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}var e,o=(e=n(8133))&&e.__esModule?e:{default:e},l=n(2814);function r(t,e){if(n=t,!(null!=(o=e)&&"undefined"!==typeof Symbol&&o[Symbol.hasInstance]?o[Symbol.hasInstance](n):n instanceof o))throw new TypeError("Cannot call a class as a function");var n,o}function u(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function a(t,e){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},a(t,e)}function i(t){var e=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(t){return!1}}();return function(){var n,o=p(t);if(e){var l=p(this).constructor;n=Reflect.construct(o,arguments,l)}else n=o.apply(this,arguments);return c(this,n)}}function c(e,n){if(n&&("object"===t(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(e)}function p(t){return p=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},p(t)}return function(t){!function(t,e){if("function"!==typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&a(t,e)}(s,t);var e,n,c,p=i(s);function s(){var t;return r(this,s),(t=p.call(this)).state={isOpen:!1},t}return e=s,(n=[{key:"onChange",value:function(t){this.setState({isOpen:t.target.checked})}},{key:"onVisibleChange",value:function(t){this.setState({isOpen:t})}},{key:"render",value:function(){return o.default.createElement("div",null,o.default.createElement(l.Tooltip,{isOpen:this.state.isOpen,onVisibleChange:this.onVisibleChange.bind(this),placement:"top",content:"Hello uiw!"},o.default.createElement("span",null,"\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7 Switch \u7ec4\u4ef6\u6765\u63a7\u5236")),o.default.createElement(l.Divider,null),o.default.createElement(l.Switch,{checked:this.state.isOpen,onChange:this.onChange.bind(this)}))}}])&&u(e.prototype,n),c&&u(e,c),Object.defineProperty(e,"prototype",{writable:!1}),s}(o.default.Component)}()},data:{20:{name:20,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "right",\n    content: "\\u53F3\\u8FB9\\u6587\\u5B57\\u63D0\\u793A"\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, null, "\\u53F3\\u8FB9\\u6587\\u5B57\\u63D0\\u793A(right)")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "top",\n    content: "\\u4E0A\\u8FB9\\u6587\\u5B57\\u63D0\\u793A"\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, null, "\\u4E0A\\u8FB9\\u6587\\u5B57\\u63D0\\u793A(top)")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "left",\n    content: "\\u5DE6\\u8FB9\\u6587\\u5B57\\u63D0\\u793A"\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, null, "\\u5DE6\\u8FB9\\u6587\\u5B57\\u63D0\\u793A(left)")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "bottom",\n    content: "\\u4E0B\\u8FB9\\u6587\\u5B57\\u63D0\\u793A"\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, null, "\\u4E0B\\u8FB9\\u6587\\u5B57\\u63D0\\u793A(bottom)")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "top",\n    content: "\\u5DF2\\u88AB\\u7981\\u7528"\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    disabled: true\n  }, "\\u7981\\u7528")));\n};\n\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Tooltip, Button } from \'uiw\';\n\nconst Demo = () => (\n  <div>\n    <Tooltip placement="right" content="\u53f3\u8fb9\u6587\u5b57\u63d0\u793a">\n      <Button>\u53f3\u8fb9\u6587\u5b57\u63d0\u793a(right)</Button>\n    </Tooltip>\n    <Tooltip placement="top" content="\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a">\n      <Button>\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a(top)</Button>\n    </Tooltip>\n    <Tooltip placement="left" content="\u5de6\u8fb9\u6587\u5b57\u63d0\u793a">\n      <Button>\u5de6\u8fb9\u6587\u5b57\u63d0\u793a(left)</Button>\n    </Tooltip>\n    <Tooltip placement="bottom" content="\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a">\n      <Button>\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a(bottom)</Button>\n    </Tooltip>\n    <Tooltip placement="top" content="\u5df2\u88ab\u7981\u7528">\n      <Button disabled={true}>\u7981\u7528</Button>\n    </Tooltip>\n  </div>\n)\nexport default Demo'},50:{name:50,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar btnStl = {\n  position: \'relative\',\n  width: 70\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "left",\n    content: /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!")\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "primary"\n  }, "\\u5DE6\\u8FB9\\u6587\\u5B57\\u63D0\\u793A(left)")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "top",\n    content: /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!")\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "primary"\n  }, "\\u4E0A\\u8FB9\\u6587\\u5B57\\u63D0\\u793A(top)")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "bottom",\n    content: /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!")\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "primary"\n  }, "\\u4E0B\\u8FB9\\u6587\\u5B57\\u63D0\\u793A(bottom)")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "right",\n    content: /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!")\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "primary"\n  }, "\\u53F3\\u8FB9\\u6587\\u5B57\\u63D0\\u793A(right)")), /*#__PURE__*/_react["default"].createElement(_uiw.Divider, null), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      position: \'relative\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "topLeft",\n    content: /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!")\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread(_objectSpread({}, btnStl), {}, {\n      left: 70\n    })\n  }, "TL")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "top",\n    content: /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!")\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread(_objectSpread({}, btnStl), {}, {\n      left: 70\n    })\n  }, "Top")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "topRight",\n    content: /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!")\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread(_objectSpread({}, btnStl), {}, {\n      left: 70\n    })\n  }, "TR"))), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      position: \'relative\',\n      paddingTop: 10\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "leftTop",\n    content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!"), " \\u4F4D\\u7F6E\\u6709 12 \\u4E2A\\u65B9\\u5411\\uFF0C\\u6839\\u636E placement \\u53C2\\u6570\\u6765\\u8BBE\\u7F6E\\u3002")\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread({}, btnStl)\n  }, "LT")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "rightTop",\n    content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!"), " \\u4F4D\\u7F6E\\u6709 12 \\u4E2A\\u65B9\\u5411\\uFF0C\\u6839\\u636E placement \\u53C2\\u6570\\u6765\\u8BBE\\u7F6E\\u3002")\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread(_objectSpread({}, btnStl), {}, {\n      left: 216\n    })\n  }, "RT"))), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      position: \'relative\',\n      paddingTop: 10\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "left",\n    content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!"), " \\u4F4D\\u7F6E\\u6709 12 \\u4E2A\\u65B9\\u5411\\uFF0C\\u6839\\u636E placement \\u53C2\\u6570\\u6765\\u8BBE\\u7F6E\\u3002")\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread({}, btnStl)\n  }, "Left")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "right",\n    content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!"), " \\u4F4D\\u7F6E\\u6709 12 \\u4E2A\\u65B9\\u5411\\uFF0C\\u6839\\u636E placement \\u53C2\\u6570\\u6765\\u8BBE\\u7F6E\\u3002")\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread(_objectSpread({}, btnStl), {}, {\n      left: 216\n    })\n  }, "Right"))), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      position: \'relative\',\n      paddingTop: 10\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "leftBottom",\n    content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!"), " \\u4F4D\\u7F6E\\u6709 12 \\u4E2A\\u65B9\\u5411\\uFF0C\\u6839\\u636E placement \\u53C2\\u6570\\u6765\\u8BBE\\u7F6E\\u3002")\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread({}, btnStl)\n  }, "LB")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "rightBottom",\n    content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!"), " \\u4F4D\\u7F6E\\u6709 12 \\u4E2A\\u65B9\\u5411\\uFF0C\\u6839\\u636E placement \\u53C2\\u6570\\u6765\\u8BBE\\u7F6E\\u3002")\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread(_objectSpread({}, btnStl), {}, {\n      left: 216\n    })\n  }, "RB"))), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      position: \'relative\',\n      paddingTop: 10\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "bottomLeft",\n    content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!"), " \\u4F4D\\u7F6E\\u6709 12 \\u4E2A\\u65B9\\u5411\\uFF0C\\u6839\\u636E placement \\u53C2\\u6570\\u6765\\u8BBE\\u7F6E\\u3002")\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread(_objectSpread({}, btnStl), {}, {\n      left: 70\n    })\n  }, "BL")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "bottom",\n    content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!"), " \\u4F4D\\u7F6E\\u6709 12 \\u4E2A\\u65B9\\u5411\\uFF0C\\u6839\\u636E placement \\u53C2\\u6570\\u6765\\u8BBE\\u7F6E\\u3002")\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread(_objectSpread({}, btnStl), {}, {\n      left: 70\n    })\n  }, "Bottom")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    placement: "bottomRight",\n    content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Hello uiw!"), " \\u4F4D\\u7F6E\\u6709 12 \\u4E2A\\u65B9\\u5411\\uFF0C\\u6839\\u636E placement \\u53C2\\u6570\\u6765\\u8BBE\\u7F6E\\u3002")\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    style: _objectSpread(_objectSpread({}, btnStl), {}, {\n      left: 70\n    })\n  }, "BR"))));\n};\n\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Tooltip, Button, Divider } from \'uiw\';\n\nconst btnStl = {position: \'relative\', width: 70 }\nconst Demo = () => (\n  <div>\n    <Tooltip placement="left" content={<strong>Hello uiw!</strong>}>\n      <Button type="primary">\u5de6\u8fb9\u6587\u5b57\u63d0\u793a(left)</Button>\n    </Tooltip>\n\n    <Tooltip placement="top" content={<strong>Hello uiw!</strong>}>\n      <Button type="primary">\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a(top)</Button>\n    </Tooltip>\n\n    <Tooltip placement="bottom" content={<strong>Hello uiw!</strong>}>\n      <Button type="primary">\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a(bottom)</Button>\n    </Tooltip>\n\n    <Tooltip placement="right" content={<strong>Hello uiw!</strong>}>\n      <Button type="primary">\u53f3\u8fb9\u6587\u5b57\u63d0\u793a(right)</Button>\n    </Tooltip>\n\n    <Divider />\n    <div style={{ position: \'relative\' }}>\n      <Tooltip placement="topLeft" content={<strong>Hello uiw!</strong>}>\n        <Button style={{ ...btnStl, left: 70 }}>TL</Button>\n      </Tooltip>\n      <Tooltip placement="top" content={<strong>Hello uiw!</strong>}>\n        <Button style={{ ...btnStl, left: 70}}>Top</Button>\n      </Tooltip>\n      <Tooltip placement="topRight" content={<strong>Hello uiw!</strong>}>\n        <Button style={{ ...btnStl, left: 70 }}>TR</Button>\n      </Tooltip>\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n      <Tooltip placement="leftTop" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n        <Button style={{ ...btnStl }}>LT</Button>\n      </Tooltip>\n      <Tooltip placement="rightTop" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n        <Button style={{ ...btnStl, left: 216 }}>RT</Button>\n      </Tooltip>\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n      <Tooltip placement="left" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n        <Button style={{ ...btnStl }}>Left</Button>\n      </Tooltip>\n      <Tooltip placement="right" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n        <Button style={{ ...btnStl, left: 216 }}>Right</Button>\n      </Tooltip>\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n      <Tooltip placement="leftBottom" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n        <Button style={{ ...btnStl }}>LB</Button>\n      </Tooltip>\n      <Tooltip placement="rightBottom" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n        <Button style={{ ...btnStl, left: 216 }}>RB</Button>\n      </Tooltip>\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n      <Tooltip placement="bottomLeft" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n        <Button style={{ ...btnStl, left: 70 }}>BL</Button>\n      </Tooltip>\n      <Tooltip placement="bottom" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n        <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\n      </Tooltip>\n      <Tooltip placement="bottomRight" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n        <Button style={{ ...btnStl, left: 70 }}>BR</Button>\n      </Tooltip>\n    </div>\n\n  </div>\n)\nexport default Demo'},130:{name:130,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    trigger: "hover",\n    placement: "top",\n    content: "Hello uiw!"\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "primary"\n  }, "\\u60AC\\u6D6E\\u5F39\\u51FA\\u6587\\u5B57\\u63D0\\u793A(top)")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    trigger: "click",\n    placement: "top",\n    content: "Hello uiw!"\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "success"\n  }, "\\u70B9\\u51FB\\u5F39\\u51FA\\u63D0\\u793A(top)")));\n};\n\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Tooltip, Button } from \'uiw\';\n\nconst Demo = () => (\n  <div>\n\n    <Tooltip trigger="hover" placement="top" content="Hello uiw!">\n      <Button type="primary">\u60ac\u6d6e\u5f39\u51fa\u6587\u5b57\u63d0\u793a(top)</Button>\n    </Tooltip>\n    <Tooltip trigger="click" placement="top" content="Hello uiw!">\n      <Button type="success">\u70b9\u51fb\u5f39\u51fa\u63d0\u793a(top)</Button>\n    </Tooltip>\n\n  </div>\n)\nexport default Demo'},153:{name:153,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    visibleArrow: false,\n    trigger: "hover",\n    placement: "top",\n    content: "Hello uiw!"\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "primary"\n  }, "\\u60AC\\u6D6E\\u5F39\\u51FA\\u6587\\u5B57\\u63D0\\u793A(top)")), /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n    visibleArrow: false,\n    trigger: "click",\n    placement: "right",\n    content: "Hello uiw!"\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "success"\n  }, "\\u70B9\\u51FB\\u5F39\\u51FA\\u63D0\\u793A(right)")));\n};\n\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Tooltip, Button } from \'uiw\';\n\nconst Demo = () => (\n  <div>\n\n    <Tooltip visibleArrow={false} trigger="hover" placement="top" content="Hello uiw!">\n      <Button type="primary">\u60ac\u6d6e\u5f39\u51fa\u6587\u5b57\u63d0\u793a(top)</Button>\n    </Tooltip>\n    <Tooltip visibleArrow={false} trigger="click" placement="right" content="Hello uiw!">\n      <Button type="success">\u70b9\u51fb\u5f39\u51fa\u63d0\u793a(right)</Button>\n    </Tooltip>\n\n  </div>\n)\nexport default Demo'},174:{name:174,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},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; } }\n\nfunction _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\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, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\n\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); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\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); }; }\n\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); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\n\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; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nvar Demo = /*#__PURE__*/function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  var _super = _createSuper(Demo);\n\n  function Demo() {\n    var _this;\n\n    _classCallCheck(this, Demo);\n\n    _this = _super.call(this);\n    _this.state = {\n      isOpen: false\n    };\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: "onChange",\n    value: function onChange(e) {\n      this.setState({\n        isOpen: e.target.checked\n      });\n    }\n  }, {\n    key: "onVisibleChange",\n    value: function onVisibleChange(isOpen) {\n      this.setState({\n        isOpen: isOpen\n      });\n    }\n  }, {\n    key: "render",\n    value: function render() {\n      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Tooltip, {\n        isOpen: this.state.isOpen,\n        onVisibleChange: this.onVisibleChange.bind(this),\n        placement: "top",\n        content: "Hello uiw!"\n      }, /*#__PURE__*/_react["default"].createElement("span", null, "\\u9F20\\u6807\\u79FB\\u52A8\\u5230\\u6B64\\u5904\\uFF0C\\u663E\\u793A\\u548C\\u6D88\\u5931\\u89E6\\u53D1\\u4E8B\\u4EF6\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u901A\\u8FC7 Switch \\u7EC4\\u4EF6\\u6765\\u63A7\\u5236")), /*#__PURE__*/_react["default"].createElement(_uiw.Divider, null), /*#__PURE__*/_react["default"].createElement(_uiw.Switch, {\n        checked: this.state.isOpen,\n        onChange: this.onChange.bind(this)\n      }));\n    }\n  }]);\n\n  return Demo;\n}(_react["default"].Component);\n\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Tooltip, Switch, Divider } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor() {\n    super()\n    this.state = {\n      isOpen: false,\n    }\n  }\n  onChange(e) {\n    this.setState({ isOpen: e.target.checked });\n  }\n  onVisibleChange(isOpen) {\n    this.setState({ isOpen });\n  }\n  render() {\n    return (\n      <div>\n        <Tooltip\n          isOpen={this.state.isOpen}\n          onVisibleChange={this.onVisibleChange.bind(this)}\n          placement=\"top\"\n          content=\"Hello uiw!\"\n        >\n          <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7 Switch \u7ec4\u4ef6\u6765\u63a7\u5236</span>\n        </Tooltip>\n        <Divider />\n        <Switch checked={this.state.isOpen} onChange={this.onChange.bind(this)} />\n      </div>\n    )\n  }\n}\nexport default Demo"}},source:'Tooltip \u6587\u5b57\u63d0\u793a\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-tooltip/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-tooltip.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-tooltip)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-tooltip.svg?label=@uiw/react-tooltip)](https://npmjs.com/@uiw/react-tooltip)\n\n\u7b80\u5355\u7684\u6587\u5b57\u63d0\u793a\u6c14\u6ce1\u6846\u3002\n\n```jsx\nimport { Tooltip } from \'uiw\';\n// or\nimport Tooltip from \'@uiw/react-tooltip\';\n```\n\n### \u57fa\u7840\u7528\u6cd5\n\n\u6700\u7b80\u5355\u7684\u7528\u6cd5\u3002\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \'react\';\nimport { Tooltip, Button } from \'uiw\';\n\nconst Demo = () => (\n  <div>\n    <Tooltip placement="right" content="\u53f3\u8fb9\u6587\u5b57\u63d0\u793a">\n      <Button>\u53f3\u8fb9\u6587\u5b57\u63d0\u793a(right)</Button>\n    </Tooltip>\n    <Tooltip placement="top" content="\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a">\n      <Button>\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a(top)</Button>\n    </Tooltip>\n    <Tooltip placement="left" content="\u5de6\u8fb9\u6587\u5b57\u63d0\u793a">\n      <Button>\u5de6\u8fb9\u6587\u5b57\u63d0\u793a(left)</Button>\n    </Tooltip>\n    <Tooltip placement="bottom" content="\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a">\n      <Button>\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a(bottom)</Button>\n    </Tooltip>\n    <Tooltip placement="top" content="\u5df2\u88ab\u7981\u7528">\n      <Button disabled={true}>\u7981\u7528</Button>\n    </Tooltip>\n  </div>\n)\nexport default Demo\n```\n\n### \u4f4d\u7f6e\n\n\u4f4d\u7f6e\u6709 `12` \u4e2a\u65b9\u5411\uff0c\u6839\u636e `placement` \u53c2\u6570\u6765\u8bbe\u7f6e\u3002\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \'react\';\nimport { Tooltip, Button, Divider } from \'uiw\';\n\nconst btnStl = {position: \'relative\', width: 70 }\nconst Demo = () => (\n  <div>\n    <Tooltip placement="left" content={<strong>Hello uiw!</strong>}>\n      <Button type="primary">\u5de6\u8fb9\u6587\u5b57\u63d0\u793a(left)</Button>\n    </Tooltip>\n\n    <Tooltip placement="top" content={<strong>Hello uiw!</strong>}>\n      <Button type="primary">\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a(top)</Button>\n    </Tooltip>\n\n    <Tooltip placement="bottom" content={<strong>Hello uiw!</strong>}>\n      <Button type="primary">\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a(bottom)</Button>\n    </Tooltip>\n\n    <Tooltip placement="right" content={<strong>Hello uiw!</strong>}>\n      <Button type="primary">\u53f3\u8fb9\u6587\u5b57\u63d0\u793a(right)</Button>\n    </Tooltip>\n\n    <Divider />\n    <div style={{ position: \'relative\' }}>\n      <Tooltip placement="topLeft" content={<strong>Hello uiw!</strong>}>\n        <Button style={{ ...btnStl, left: 70 }}>TL</Button>\n      </Tooltip>\n      <Tooltip placement="top" content={<strong>Hello uiw!</strong>}>\n        <Button style={{ ...btnStl, left: 70}}>Top</Button>\n      </Tooltip>\n      <Tooltip placement="topRight" content={<strong>Hello uiw!</strong>}>\n        <Button style={{ ...btnStl, left: 70 }}>TR</Button>\n      </Tooltip>\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n      <Tooltip placement="leftTop" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n        <Button style={{ ...btnStl }}>LT</Button>\n      </Tooltip>\n      <Tooltip placement="rightTop" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n        <Button style={{ ...btnStl, left: 216 }}>RT</Button>\n      </Tooltip>\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n      <Tooltip placement="left" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n        <Button style={{ ...btnStl }}>Left</Button>\n      </Tooltip>\n      <Tooltip placement="right" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n        <Button style={{ ...btnStl, left: 216 }}>Right</Button>\n      </Tooltip>\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n      <Tooltip placement="leftBottom" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n        <Button style={{ ...btnStl }}>LB</Button>\n      </Tooltip>\n      <Tooltip placement="rightBottom" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n        <Button style={{ ...btnStl, left: 216 }}>RB</Button>\n      </Tooltip>\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n      <Tooltip placement="bottomLeft" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n        <Button style={{ ...btnStl, left: 70 }}>BL</Button>\n      </Tooltip>\n      <Tooltip placement="bottom" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n        <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\n      </Tooltip>\n      <Tooltip placement="bottomRight" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n        <Button style={{ ...btnStl, left: 70 }}>BR</Button>\n      </Tooltip>\n    </div>\n\n  </div>\n)\nexport default Demo\n```\n\n### \u4e8b\u4ef6\n\n\u6587\u5b57\u63d0\u793a\u7ec4\u4ef6 `<Tooltip />`\uff0c\u901a\u8fc7\u8bbe\u7f6e\u5c5e\u6027 `trigger` \u53ef\u4ee5\u6587\u5b57\u63d0\u793a\u64cd\u4f5c\u65b9\u5f0f\u3002\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \'react\';\nimport { Tooltip, Button } from \'uiw\';\n\nconst Demo = () => (\n  <div>\n\n    <Tooltip trigger="hover" placement="top" content="Hello uiw!">\n      <Button type="primary">\u60ac\u6d6e\u5f39\u51fa\u6587\u5b57\u63d0\u793a(top)</Button>\n    </Tooltip>\n    <Tooltip trigger="click" placement="top" content="Hello uiw!">\n      <Button type="success">\u70b9\u51fb\u5f39\u51fa\u63d0\u793a(top)</Button>\n    </Tooltip>\n\n  </div>\n)\nexport default Demo\n```\n\n### \u6587\u5b57\u63d0\u793a\u6846\u4e0d\u663e\u793a\u7bad\u5934\n\n\u901a\u8fc7\u8bbe\u7f6e\u5c5e\u6027 `visibleArrow` \u53ef\u4ee5\u6587\u5b57\u63d0\u793a\u6846\u4e0d\u663e\u793a\u7bad\u5934\u3002\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \'react\';\nimport { Tooltip, Button } from \'uiw\';\n\nconst Demo = () => (\n  <div>\n\n    <Tooltip visibleArrow={false} trigger="hover" placement="top" content="Hello uiw!">\n      <Button type="primary">\u60ac\u6d6e\u5f39\u51fa\u6587\u5b57\u63d0\u793a(top)</Button>\n    </Tooltip>\n    <Tooltip visibleArrow={false} trigger="click" placement="right" content="Hello uiw!">\n      <Button type="success">\u70b9\u51fb\u5f39\u51fa\u63d0\u793a(right)</Button>\n    </Tooltip>\n\n  </div>\n)\nexport default Demo\n```\n\n### \u53d7\u63a7\u7ec4\u4ef6\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \'react\';\nimport { Tooltip, Switch, Divider } from \'uiw\';\n\nclass Demo extends React.Component {\n  constructor() {\n    super()\n    this.state = {\n      isOpen: false,\n    }\n  }\n  onChange(e) {\n    this.setState({ isOpen: e.target.checked });\n  }\n  onVisibleChange(isOpen) {\n    this.setState({ isOpen });\n  }\n  render() {\n    return (\n      <div>\n        <Tooltip\n          isOpen={this.state.isOpen}\n          onVisibleChange={this.onVisibleChange.bind(this)}\n          placement="top"\n          content="Hello uiw!"\n        >\n          <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7 Switch \u7ec4\u4ef6\u6765\u63a7\u5236</span>\n        </Tooltip>\n        <Divider />\n        <Switch checked={this.state.isOpen} onChange={this.onChange.bind(this)} />\n      </div>\n    )\n  }\n}\nexport default Demo\n```\n\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| content | \u663e\u793a\u7684\u5185\u5bb9 | String,React.ReactNode | - |\n| placement | \u6c14\u6ce1\u6846\u4f4d\u7f6e\uff0c\u53ef\u73b0\u5b9e\u7bad\u5934\u5728\u4e0d\u901a\u7684\u65b9\u4f4d | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | `top` |\n| visibleArrow | \u662f\u5426\u663e\u793a Tooltip \u7bad\u5934 | Boolean | `true` |\n| delay | \u5ef6\u8fdf\u8fdb\u5165\u548c\u6d88\u5931\uff0c`{ show: 2000, hide: 4000 }` \u6216\u8005\u76f4\u63a5\u8bbe\u7f6e `2000`\uff0c\u53ea\u5bf9 `trigger=hover` \u6709\u6548\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Object/Number | - |\n| trigger | \u60ac\u505c/\u70b9\u51fb\u5f39\u51fa\u7a97\u53e3\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Enum{`hover`, `click`} | `hover` |\n| disabled | \u662f\u5426\u7981\u7528\u5f39\u51fa\u76ee\u6807 | Boolean | `false` |\n| isOpen | \u9ed8\u8ba4\u662f\u5426\u663e\u793a\u5f39\u7a97\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Boolean | `false` |\n| autoAdjustOverflow | \u5f39\u51fa\u5c42\u88ab\u906e\u6321\u65f6\u81ea\u52a8\u8c03\u6574\u4f4d\u7f6e\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Boolean | `false` |\n| onVisibleChange | \u663e\u793a\u9690\u85cf\u7684\u56de\u8c03\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Function(isVisible:bool) | - |\n\n\u66f4\u591a\u5c5e\u6027\u8bf7\u53c2\u8003 [OverlayTrigger](#/components/overlay-trigger)\u3002\n'}}}]);
-//# sourceMappingURL=8763.a8c2f646.chunk.js.map

package/web/static/js/8822.ae88e086.chunk.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8822],{8822:function(e,n,t){t.r(n),n.default={components:{18:function(){function e(n){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(n)}var n,o=(n=t(8133))&&n.__esModule?n:{default:n},r=t(2814);function i(e,n){if(t=e,!(null!=(o=n)&&"undefined"!==typeof Symbol&&o[Symbol.hasInstance]?o[Symbol.hasInstance](t):t instanceof o))throw new TypeError("Cannot call a class as a function");var t,o}function a(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function l(e,n){return l=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,n){return e.__proto__=n,e},l(e,n)}function c(e){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 t,o=d(e);if(n){var r=d(this).constructor;t=Reflect.construct(o,arguments,r)}else t=o.apply(this,arguments);return u(this,t)}}function u(n,t){if(t&&("object"===e(t)||"function"===typeof t))return t;if(void 0!==t)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}(n)}function d(e){return d=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},d(e)}var s=["adobe","alipay","aliwangwang","android-o","android","apple","appstore-o","appstore","area-chart","down","left","right","up","arrow-down","arrow-left","arrow-right","arrow-up","arrows-alt","asterisk","backward","baidu","bar-chart","barcode","bell","camera-o","caret-down","caret-left","caret-right","caret-up","check-square-o","check-square","check","chrome","circle-check-o","circle-check","circle-close-o","circle-close","close-square-o","close-square","close","cloud-download-o","cloud-download","cloud-upload-o","cloud-upload","coffee","component","copy","copyright","css3","cut","d-arrow-left","d-arrow-right","d-caret","dashboard","date","delete","dingding","dislike-o","document","dot-chart","circle-o","down-circle-o","down-circle","down-square-o","down-square","square-o","download","edit","enter","environment-o","environment","eye-o","eye","facebook","file-add","file-excel","file-jpg","file-pdf","file-text","file-unknown","filter","firefox","folder-add","folder-open","folder","forward","foursquare","frown-o","frown","github-o","github","global","heart-off","heart-on","home","html5","ie","inbox","information-o","information","laptop","left-circle-o","left-circle","left-square-o","left-square","like-o","link","linkedin","linux","loading","lock","login","logout","man","map","meh-o","meh","menu-fold","menu-unfold","menu","mail","mail-o","message","minus-circle-o","minus-circle","minus-square-o","minus-square","minus","mobile","more","notification","opera","paper-clip","pause-circle-o","pause-circle","pause","pay-circle-o","pay","picasa","picture","pie-chart","pinterest","play-circle-o","play-circle","plus-circle-o","plus-circle","plus-square-o","plus-square","plus","poweroff","printer","qq","qrcode","question-circle-o","question-circle","reddit","reload","right-circle-o","right-circle","right-square-o","right-square","rollback","safari","safety","save","search","setting-o","setting","share","shopping-cart","shrink","smile-o","smile","star-off","star-on","swap-left","swap-right","swap","table","tag-o","tag","tags-o","tags","taobao","time-o","time","twitter","uiw","unlock","up-circle-o","up-circle","up-square-o","up-square","upload","user-add","user-delete","user","usergroup-add","usergroup-delete","verification","verticle-left","verticle-right","video-camera","warning-o","warning","weibo","weixin","wifi","windows","woman","zoom-in","zoom-out","stop-o","stop"],p={fontSize:26,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",textAlign:"center",justifyContent:"center",fill:"#525252"};return function(e){!function(e,n){if("function"!==typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),n&&l(e,n)}(f,e);var n,t,u,d=c(f);function f(e){var n;return i(this,f),(n=d.call(this,e)).state={len:0,result:[]},n}return n=f,(t=[{key:"onChange",value:function(e){var n=e.target.value,t=n?s.filter((function(e){return e.indexOf(n)>-1})):[],o=t.length,r=t.splice(0,15);this.setState({len:o,result:r})}},{key:"render",value:function(){var e=this.state,n=e.len,t=e.result;return o.default.createElement("div",null,o.default.createElement(r.Input,{preIcon:"search",placeholder:"\u8bf7\u8f93\u5165\u56fe\u6807\u540d\u79f0",type:"text",style:{maxWidth:200},onChange:this.onChange.bind(this)}),o.default.createElement("div",{style:{padding:"10px 0"}},"\u641c\u7d22\u5230 ",this.state.len," \u4e2a\u7ed3\u679c",n>0&&o.default.createElement("span",null,"\uff0c\u4e0b\u9762\u5c55\u793a ",n>15?"15":n," \u4e2a\u56fe\u6807\uff0c\u53ef\u4ee5\u70b9\u51fb\u590d\u5236\u56fe\u6807\u4ee3\u7801: ")),o.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},t.map((function(e,n){var t='<Icon type="'.concat(e,'" />');return o.default.createElement(r.CopyToClipboard,{key:n,style:p,text:t,onClick:function(){r.Notify.success({title:"\u4f60\u5df2\u590d\u5236\u5185\u5bb9\uff01",description:o.default.createElement("span",null,"\u5df2\u590d\u5236 ",o.default.createElement("b",{style:{color:"red"}},t)," \u53ef\u4ee5\u53bb\u7c98\u8d34\u4e86\uff01")})}},o.default.createElement("div",{key:n},o.default.createElement(r.Icon,{type:e}),o.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e)))}))))}}])&&a(n.prototype,t),u&&a(n,u),Object.defineProperty(n,"prototype",{writable:!1}),f}(o.default.Component)}(),121:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(2814);return function(){return n.default.createElement("div",{style:{fontSize:18,lineHeight:"12px"}},n.default.createElement(o.Icon,{type:"heart-on"}),n.default.createElement(o.Icon,{type:"pie-chart"}),n.default.createElement(o.Icon,{type:"tag"}))}}(),140:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(2814);return function(){return n.default.createElement("div",{style:{fontSize:"28px"}},n.default.createElement(o.Icon,{type:"heart-on"}),n.default.createElement(o.Icon,{type:"pie-chart"}),n.default.createElement(o.Icon,{type:"tag"}))}}(),161:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(2814);return function(){return n.default.createElement("div",{style:{fontSize:"28px",color:"green"}},n.default.createElement(o.Icon,{type:"apple",color:"red"}),n.default.createElement(o.Icon,{type:"pie-chart",style:{fill:"currentColor"}}),n.default.createElement(o.Icon,{type:"frown",style:{fill:"blue"}}),n.default.createElement(o.Icon,{type:"uiw",style:{stroke:"red",fill:"#ffef00"}}))}}(),178:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(2814);return function(){return n.default.createElement("div",null,n.default.createElement("h3",{style:{margin:0}},"Exit ",n.default.createElement(o.Icon,{verticalAlign:"baseline",type:"baidu"})),n.default.createElement("span",null,"uiw"),n.default.createElement(o.Icon,{type:"uiw",verticalAlign:"baseline",style:{fill:"#009688",fontSize:21}}))}}(),201:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(2814);return function(){return n.default.createElement("div",null,n.default.createElement(o.Icon,{type:"circle-close",verticalAlign:"baseline"}),"  \u56fe\u6807\u540d\u79f0\uff1acircle-close\uff0c[circle\u5708]-[\u5173\u95edclose]",n.default.createElement("br",null),n.default.createElement(o.Icon,{type:"circle-close-o",verticalAlign:"baseline"})," \u56fe\u6807\u540d\u79f0\uff1acircle-close-o\uff0c[circle\u5708]-[\u5173\u95edclose]-[o\u63cf\u7ebf]")}}(),219:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(2814);return function(){return n.default.createElement("div",{style:{fontSize:21,color:"green"}},n.default.createElement(o.Icon,{type:"loading",spin:!0,color:"red"}),n.default.createElement(o.Icon,{type:"reload",spin:!0}),n.default.createElement(o.Icon,{type:"picasa",spin:!0,style:{fill:"blue"}}),n.default.createElement(o.Icon,{type:"smile-o",spin:!0,style:{fill:"blue"}}))}}(),236:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(2814);var r=n.default.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},n.default.createElement("path",{d:"M19 0H7c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h5.59l3.71 3.71c.17.18.42.29.7.29.55 0 1-.45 1-1v-3h1c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zM7 13c-1.1 0-2-.9-2-2V4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h1v3a1.003 1.003 0 0 0 1.71.71L7.41 16H13c.55 0 1-.45 1-1v-.17L12.17 13H7z",fillRule:"evenodd"})),i=n.default.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},n.default.createElement("path",{d:"M19 8h-1.26c-.19-.73-.48-1.42-.85-2.06l.94-.94a.996.996 0 0 0 0-1.41l-1.41-1.41a.996.996 0 0 0-1.41 0l-.94.94c-.65-.38-1.34-.67-2.07-.86V1c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v1.26c-.76.2-1.47.5-2.13.89L5 2.28a.972.972 0 0 0-1.36 0L2.28 3.64c-.37.38-.37.98 0 1.36l.87.87c-.39.66-.69 1.37-.89 2.13H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h1.26c.19.73.48 1.42.85 2.06l-.94.94a.996.996 0 0 0 0 1.41l1.41 1.41c.39.39 1.02.39 1.41 0l.94-.94c.64.38 1.33.66 2.06.85V19c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1.26c.76-.2 1.47-.5 2.13-.89l.88.87c.37.37.98.37 1.36 0l1.36-1.36c.37-.38.37-.98 0-1.36l-.87-.87c.4-.65.7-1.37.89-2.13H19c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-9 7c-2.76 0-5-2.24-5-5s2.24-5 5-5v10z",fillRule:"evenodd"})),a={marginRight:10};return function(){return n.default.createElement("div",{style:{fontSize:21,color:"green"}},n.default.createElement(o.Icon,{style:a,type:r,color:"red"}),n.default.createElement(o.Icon,{style:a,type:i,spin:!0}))}}(),307:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(2814);var r=["circle-o","down-square-o","down-square","up-square-o","up-square","left-square-o","left-square","right-square-o","right-square"],i={fontSize:18,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",fill:"#525252"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},r.map((function(e,t){return n.default.createElement("div",{key:t,style:i},n.default.createElement(o.Icon,{type:e}),n.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e))})))}}(),336:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(2814);var r=["square-o","down-circle-o","down-circle","up-circle-o","up-circle","left-circle-o","left-circle","right-circle-o","right-circle","play-circle-o","play-circle"],i={fontSize:18,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",fill:"#525252"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},r.map((function(e,t){return n.default.createElement("div",{key:t,style:i},n.default.createElement(o.Icon,{type:e}),n.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e))})))}}(),364:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(2814);var r=["down","up","left","right","caret-down","caret-up","caret-left","caret-right","arrow-down","arrow-up","arrow-left","arrow-right","shrink","arrows-alt","d-arrow-left","d-arrow-right","enter","rollback","d-caret","backward","forward","logout","login","swap-left","swap-right","swap","verticle-left","verticle-right","menu","menu-fold","menu-unfold"],i={fontSize:18,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",fill:"#525252"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},r.map((function(e,t){return n.default.createElement("div",{key:t,style:i},n.default.createElement(o.Icon,{type:e}),n.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e))})))}}(),396:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(2814);var r=["smile-o","smile","frown-o","frown","meh-o","meh","pause-circle-o","pause","pause-circle","information-o","information","warning-o","warning","question-circle-o","question-circle","stop-o","stop"],i={fontSize:18,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",fill:"#525252"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},r.map((function(e,t){return n.default.createElement("div",{key:t,style:i},n.default.createElement(o.Icon,{type:e}),n.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e))})))}}(),427:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(2814);var r=["plus","plus-circle-o","plus-circle","plus-square","plus-square-o","minus","minus-circle-o","minus-circle","minus-square","minus-square-o","close","circle-close-o","circle-close","close-square","close-square-o","asterisk","check","circle-check-o","circle-check","check-square","check-square-o","copyright"],i={fontSize:18,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",fill:"#525252"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},r.map((function(e,t){return n.default.createElement("div",{key:t,style:i},n.default.createElement(o.Icon,{type:e}),n.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e))})))}}(),459:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(2814);var r=["file-text","file-jpg","file-unknown","file-add","file-excel","file-pdf","folder-add","folder-open","paper-clip"],i={fontSize:18,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",fill:"#525252"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},r.map((function(e,t){return n.default.createElement("div",{key:t,style:i},n.default.createElement(o.Icon,{type:e}),n.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e))})))}}(),489:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(2814);var r=["heart-off","heart-on","star-on","star-off","lock","unlock","dashboard","area-chart","bar-chart","dot-chart","pie-chart","dislike-o","like-o","loading","reload","appstore","appstore-o","tag","tag-o","tags","tags-o","setting","setting-o","map","table","qrcode","barcode","printer","cloud-upload","cloud-upload-o","cloud-download","cloud-download-o","download","message","mail","mail-o","user","user-add","user-delete","usergroup-add","usergroup-delete","zoom-in","zoom-out","time","time-o","bell","camera-o","coffee","document","delete","date","edit","eye-o","environment-o","filter","global","inbox","home","laptop","link","copy","more","shopping-cart","search","save","safety","poweroff","picasa","notification","pay-circle-o","pay","picture","woman","man","verification","wifi","video-camera","mobile"],i={fontSize:18,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",fill:"#525252"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},r.map((function(e,t){return n.default.createElement("div",{key:t,style:i},n.default.createElement(o.Icon,{type:e}),n.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e))})))}}(),525:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(2814);var r=["uiw","windows","linux","apple","facebook","twitter","adobe","baidu","alipay","android-o","android","reddit","github","github-o","aliwangwang","dingding","foursquare","linkedin","pinterest","qq","weibo","taobao","weixin","css3","html5"],i={fontSize:18,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",fill:"#525252"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},r.map((function(e,t){return n.default.createElement("div",{key:t,style:i},n.default.createElement(o.Icon,{type:e}),n.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e))})))}}(),553:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(2814);var r=["chrome","safari","firefox","opera","ie"],i={fontSize:18,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",fill:"#525252"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},r.map((function(e,t){return n.default.createElement("div",{key:t,style:i},n.default.createElement(o.Icon,{type:e}),n.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e))})))}}()},data:{18:{name:18,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},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; } }\n\nfunction _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\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, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\n\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); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\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); }; }\n\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); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\n\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; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nvar icons = ["adobe", "alipay", "aliwangwang", "android-o", "android", "apple", "appstore-o", "appstore", "area-chart", "down", "left", "right", "up", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "arrows-alt", "asterisk", "backward", "baidu", "bar-chart", "barcode", "bell", "camera-o", "caret-down", "caret-left", "caret-right", "caret-up", "check-square-o", "check-square", "check", "chrome", "circle-check-o", "circle-check", "circle-close-o", "circle-close", "close-square-o", "close-square", "close", "cloud-download-o", "cloud-download", "cloud-upload-o", "cloud-upload", "coffee", "component", "copy", "copyright", "css3", "cut", "d-arrow-left", "d-arrow-right", "d-caret", "dashboard", "date", "delete", "dingding", "dislike-o", "document", "dot-chart", "circle-o", "down-circle-o", "down-circle", "down-square-o", "down-square", "square-o", "download", "edit", "enter", "environment-o", "environment", "eye-o", "eye", "facebook", "file-add", "file-excel", "file-jpg", "file-pdf", "file-text", "file-unknown", "filter", "firefox", "folder-add", "folder-open", "folder", "forward", "foursquare", "frown-o", "frown", "github-o", "github", "global", "heart-off", "heart-on", "home", "html5", "ie", "inbox", "information-o", "information", "laptop", "left-circle-o", "left-circle", "left-square-o", "left-square", "like-o", "link", "linkedin", "linux", "loading", "lock", "login", "logout", "man", "map", "meh-o", "meh", "menu-fold", "menu-unfold", "menu", "mail", "mail-o", "message", "minus-circle-o", "minus-circle", "minus-square-o", "minus-square", "minus", "mobile", "more", "notification", "opera", "paper-clip", "pause-circle-o", "pause-circle", "pause", "pay-circle-o", "pay", "picasa", "picture", "pie-chart", "pinterest", "play-circle-o", "play-circle", "plus-circle-o", "plus-circle", "plus-square-o", "plus-square", "plus", "poweroff", "printer", "qq", "qrcode", "question-circle-o", "question-circle", "reddit", "reload", "right-circle-o", "right-circle", "right-square-o", "right-square", "rollback", "safari", "safety", "save", "search", "setting-o", "setting", "share", "shopping-cart", "shrink", "smile-o", "smile", "star-off", "star-on", "swap-left", "swap-right", "swap", "table", "tag-o", "tag", "tags-o", "tags", "taobao", "time-o", "time", "twitter", "uiw", "unlock", "up-circle-o", "up-circle", "up-square-o", "up-square", "upload", "user-add", "user-delete", "user", "usergroup-add", "usergroup-delete", "verification", "verticle-left", "verticle-right", "video-camera", "warning-o", "warning", "weibo", "weixin", "wifi", "windows", "woman", "zoom-in", "zoom-out", \'stop-o\', \'stop\'];\nvar itemStyl = {\n  fontSize: 26,\n  minWidth: 120,\n  background: \'#eaeaea\',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: \'20px 0\',\n  display: \'flex\',\n  flexDirection: \'column\',\n  alignItems: \'center\',\n  textAlign: \'center\',\n  justifyContent: \'center\',\n  fill: \'#525252\'\n};\n\nvar Demo = /*#__PURE__*/function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  var _super = _createSuper(Demo);\n\n  function Demo(props) {\n    var _this;\n\n    _classCallCheck(this, Demo);\n\n    _this = _super.call(this, props);\n    _this.state = {\n      len: 0,\n      result: []\n    };\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: "onChange",\n    value: function onChange(env) {\n      var value = env.target.value;\n      var data = value ? icons.filter(function (item) {\n        return item.indexOf(value) > -1;\n      }) : [];\n      var len = data.length;\n      var result = data.splice(0, 15);\n      this.setState({\n        len: len,\n        result: result\n      });\n    }\n  }, {\n    key: "render",\n    value: function render() {\n      var _this$state = this.state,\n          len = _this$state.len,\n          result = _this$state.result;\n      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Input, {\n        preIcon: "search",\n        placeholder: "\\u8BF7\\u8F93\\u5165\\u56FE\\u6807\\u540D\\u79F0",\n        type: "text",\n        style: {\n          maxWidth: 200\n        },\n        onChange: this.onChange.bind(this)\n      }), /*#__PURE__*/_react["default"].createElement("div", {\n        style: {\n          padding: \'10px 0\'\n        }\n      }, "\\u641C\\u7D22\\u5230 ", this.state.len, " \\u4E2A\\u7ED3\\u679C", len > 0 && /*#__PURE__*/_react["default"].createElement("span", null, "\\uFF0C\\u4E0B\\u9762\\u5C55\\u793A ", len > 15 ? \'15\' : len, " \\u4E2A\\u56FE\\u6807\\uFF0C\\u53EF\\u4EE5\\u70B9\\u51FB\\u590D\\u5236\\u56FE\\u6807\\u4EE3\\u7801: ")), /*#__PURE__*/_react["default"].createElement("div", {\n        style: {\n          display: \'flex\',\n          flexWrap: \'wrap\',\n          marginBottom: -10,\n          marginRight: -10\n        }\n      }, result.map(function (type, idx) {\n        var iconTxt = "<Icon type=\\"".concat(type, "\\" />");\n        return /*#__PURE__*/_react["default"].createElement(_uiw.CopyToClipboard, {\n          key: idx,\n          style: itemStyl,\n          text: iconTxt,\n          onClick: function onClick() {\n            _uiw.Notify.success({\n              title: \'\u4f60\u5df2\u590d\u5236\u5185\u5bb9\uff01\',\n              description: /*#__PURE__*/_react["default"].createElement("span", null, "\\u5DF2\\u590D\\u5236 ", /*#__PURE__*/_react["default"].createElement("b", {\n                style: {\n                  color: \'red\'\n                }\n              }, iconTxt), " \\u53EF\\u4EE5\\u53BB\\u7C98\\u8D34\\u4E86\\uFF01")\n            });\n          }\n        }, /*#__PURE__*/_react["default"].createElement("div", {\n          key: idx\n        }, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n          type: type\n        }), /*#__PURE__*/_react["default"].createElement("div", {\n          style: {\n            color: \'#525252\',\n            fontSize: 12,\n            paddingTop: 8\n          }\n        }, type)));\n      })));\n    }\n  }]);\n\n  return Demo;\n}(_react["default"].Component);\n\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Input, CopyToClipboard, Icon, Notify } from \'uiw\';\n\nconst icons = ["adobe", "alipay", "aliwangwang", "android-o", "android", "apple", "appstore-o", "appstore", "area-chart", "down", "left", "right", "up", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "arrows-alt", "asterisk", "backward", "baidu", "bar-chart", "barcode", "bell", "camera-o", "caret-down", "caret-left", "caret-right", "caret-up", "check-square-o", "check-square", "check", "chrome", "circle-check-o", "circle-check", "circle-close-o", "circle-close", "close-square-o", "close-square", "close", "cloud-download-o", "cloud-download", "cloud-upload-o", "cloud-upload", "coffee", "component", "copy", "copyright", "css3", "cut", "d-arrow-left", "d-arrow-right", "d-caret", "dashboard", "date", "delete", "dingding", "dislike-o", "document", "dot-chart", "circle-o", "down-circle-o", "down-circle", "down-square-o", "down-square", "square-o", "download", "edit", "enter", "environment-o", "environment", "eye-o", "eye", "facebook", "file-add", "file-excel", "file-jpg", "file-pdf", "file-text", "file-unknown", "filter", "firefox", "folder-add", "folder-open", "folder", "forward", "foursquare", "frown-o", "frown", "github-o", "github", "global", "heart-off", "heart-on", "home", "html5", "ie", "inbox", "information-o", "information", "laptop", "left-circle-o", "left-circle", "left-square-o", "left-square", "like-o", "link", "linkedin", "linux", "loading", "lock", "login", "logout", "man", "map", "meh-o", "meh", "menu-fold", "menu-unfold", "menu", "mail", "mail-o", "message", "minus-circle-o", "minus-circle", "minus-square-o", "minus-square", "minus", "mobile", "more", "notification", "opera", "paper-clip", "pause-circle-o", "pause-circle", "pause", "pay-circle-o", "pay", "picasa", "picture", "pie-chart", "pinterest", "play-circle-o", "play-circle", "plus-circle-o", "plus-circle", "plus-square-o", "plus-square", "plus", "poweroff", "printer", "qq", "qrcode", "question-circle-o", "question-circle", "reddit", "reload", "right-circle-o", "right-circle", "right-square-o", "right-square", "rollback", "safari", "safety", "save", "search", "setting-o", "setting", "share", "shopping-cart", "shrink", "smile-o", "smile", "star-off", "star-on", "swap-left", "swap-right", "swap", "table", "tag-o", "tag", "tags-o", "tags", "taobao", "time-o", "time", "twitter", "uiw", "unlock", "up-circle-o", "up-circle", "up-square-o", "up-square", "upload", "user-add", "user-delete", "user", "usergroup-add", "usergroup-delete", "verification", "verticle-left", "verticle-right", "video-camera", "warning-o", "warning", "weibo", "weixin", "wifi", "windows", "woman", "zoom-in", "zoom-out", \'stop-o\', \'stop\'];\nconst itemStyl = {\n  fontSize: 26, minWidth: 120, background: \'#eaeaea\', marginBottom: 10, marginRight: 10, padding: \'20px 0\',\n  display: \'flex\', flexDirection: \'column\', alignItems: \'center\', textAlign: \'center\', justifyContent: \'center\', fill: \'#525252\',\n}\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      len: 0,\n      result: [],\n    }\n  }\n  onChange(env) {\n    const value = env.target.value;\n    const data = value ? icons.filter((item) => item.indexOf(value) > -1) : [];\n    const len = data.length;\n    const result = data.splice(0, 15);\n    this.setState({ len, result });\n  }\n  render() {\n    const { len, result } = this.state;\n    return (\n      <div>\n        <Input preIcon="search" placeholder="\u8bf7\u8f93\u5165\u56fe\u6807\u540d\u79f0" type="text" style={{ maxWidth: 200 }} onChange={this.onChange.bind(this)} />\n        <div style={{ padding: \'10px 0\' }}>\n          \u641c\u7d22\u5230 {this.state.len} \u4e2a\u7ed3\u679c{len > 0 && <span>\uff0c\u4e0b\u9762\u5c55\u793a {len > 15 ? \'15\' : len} \u4e2a\u56fe\u6807\uff0c\u53ef\u4ee5\u70b9\u51fb\u590d\u5236\u56fe\u6807\u4ee3\u7801: </span>}\n        </div>\n        <div style={{ display: \'flex\', flexWrap: \'wrap\', marginBottom: -10, marginRight: -10 }}>\n          {result.map((type, idx) => {\n            const iconTxt = `<Icon type="${type}" />`;\n            return (\n              <CopyToClipboard\n                key={idx}\n                style={itemStyl}\n                text={iconTxt}\n                onClick={() => {\n                  Notify.success({\n                    title: \'\u4f60\u5df2\u590d\u5236\u5185\u5bb9\uff01\',\n                    description: (\n                      <span>\n                        \u5df2\u590d\u5236 <b style={{ color: \'red\' }}>{iconTxt}</b> \u53ef\u4ee5\u53bb\u7c98\u8d34\u4e86\uff01\n                      </span>\n                    ),\n                  });\n                }}\n              >\n                <div key={idx}>\n                  <Icon type={type} />\n                  <div style={{ color: \'#525252\', fontSize: 12, paddingTop: 8 }}>{type}</div>\n                </div>\n              </CopyToClipboard>\n            )\n          })}\n        </div>\n      </div>\n    );\n  }\n}\nexport default Demo'},121:{name:121,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      fontSize: 18,\n      lineHeight: \'12px\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "heart-on"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "pie-chart"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "tag"\n  }));\n};\n\nreturn Demo;',language:"jsx",value:'import React from "react"\nimport { Icon } from \'uiw\';\n\nconst Demo =()=>(\n  <div style={{ fontSize: 18, lineHeight: \'12px\' }}>\n    <Icon type="heart-on" />\n    <Icon type="pie-chart" />\n    <Icon type="tag" />\n  </div>\n);\nexport default Demo\n'},140:{name:140,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      fontSize: \'28px\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "heart-on"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "pie-chart"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "tag"\n  }));\n};\n\nreturn Demo;',language:"jsx",value:'import React from "react"\nimport { Icon } from \'uiw\';\n\nconst Demo = () => (\n  <div style={{ fontSize: \'28px\' }}>\n    <Icon type="heart-on" />\n    <Icon type="pie-chart" />\n    <Icon type="tag" />\n  </div>\n);\nexport default Demo'},161:{name:161,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      fontSize: \'28px\',\n      color: \'green\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "apple",\n    color: "red"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "pie-chart",\n    style: {\n      fill: \'currentColor\'\n    }\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "frown",\n    style: {\n      fill: \'blue\'\n    }\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "uiw",\n    style: {\n      stroke: \'red\',\n      fill: \'#ffef00\'\n    }\n  }));\n};\n\nreturn Demo;',language:"jsx",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst Demo = () => (\n  <div style={{ fontSize: '28px',color: 'green' }}>\n    <Icon type=\"apple\" color=\"red\" />\n    <Icon type=\"pie-chart\" style={{fill: 'currentColor'}} />\n    <Icon type=\"frown\" style={{fill: 'blue'}} />\n    <Icon type=\"uiw\" style={{stroke: 'red',fill: '#ffef00'}} />\n  </div>\n);\nexport default Demo"},178:{name:178,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h3", {\n    style: {\n      margin: 0\n    }\n  }, "Exit ", /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    verticalAlign: "baseline",\n    type: "baidu"\n  })), /*#__PURE__*/_react["default"].createElement("span", null, "uiw"), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "uiw",\n    verticalAlign: "baseline",\n    style: {\n      fill: \'#009688\',\n      fontSize: 21\n    }\n  }));\n};\n\nreturn Demo;',language:"jsx",value:'import React from "react"\nimport { Icon } from \'uiw\';\n\nconst Demo = () => (\n  <div>\n    <h3 style={{ margin: 0 }}>Exit <Icon verticalAlign="baseline" type="baidu" /></h3>\n    <span>uiw</span><Icon type="uiw" verticalAlign="baseline" style={{ fill: \'#009688\', fontSize: 21 }} />\n  </div>\n);\nexport default Demo'},201:{name:201,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "circle-close",\n    verticalAlign: "baseline"\n  }), "  \\u56FE\\u6807\\u540D\\u79F0\\uFF1Acircle-close\\uFF0C[circle\\u5708]-[\\u5173\\u95EDclose]", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "circle-close-o",\n    verticalAlign: "baseline"\n  }), " \\u56FE\\u6807\\u540D\\u79F0\\uFF1Acircle-close-o\\uFF0C[circle\\u5708]-[\\u5173\\u95EDclose]-[o\\u63CF\\u7EBF]");\n};\n\nreturn Demo;',language:"jsx",value:'import React from "react"\nimport { Icon } from \'uiw\';\n\nconst Demo = () => (\n  <div>\n    <Icon type="circle-close" verticalAlign="baseline" />  \u56fe\u6807\u540d\u79f0\uff1acircle-close\uff0c[circle\u5708]-[\u5173\u95edclose]\n    <br/>\n    <Icon type="circle-close-o" verticalAlign="baseline" /> \u56fe\u6807\u540d\u79f0\uff1acircle-close-o\uff0c[circle\u5708]-[\u5173\u95edclose]-[o\u63cf\u7ebf]\n  </div>\n);\nexport default Demo'},219:{name:219,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      fontSize: 21,\n      color: \'green\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "loading",\n    spin: true,\n    color: "red"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "reload",\n    spin: true\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "picasa",\n    spin: true,\n    style: {\n      fill: \'blue\'\n    }\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "smile-o",\n    spin: true,\n    style: {\n      fill: \'blue\'\n    }\n  }));\n};\n\nreturn Demo;',language:"jsx",value:'import React from "react"\nimport { Icon } from \'uiw\';\n\nconst Demo = () => (\n  <div style={{ fontSize: 21, color: \'green\' }}>\n    <Icon type="loading" spin={true} color="red" />\n    <Icon type="reload" spin={true} />\n    <Icon type="picasa" spin={true} style={{fill: \'blue\'}} />\n    <Icon type="smile-o" spin={true} style={{fill: \'blue\'}} />\n  </div>\n);\nexport default Demo'},236:{name:236,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar chat = /*#__PURE__*/_react["default"].createElement("svg", {\n  width: "20",\n  height: "20",\n  viewBox: "0 0 20 20"\n}, /*#__PURE__*/_react["default"].createElement("path", {\n  d: "M19 0H7c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h5.59l3.71 3.71c.17.18.42.29.7.29.55 0 1-.45 1-1v-3h1c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zM7 13c-1.1 0-2-.9-2-2V4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h1v3a1.003 1.003 0 0 0 1.71.71L7.41 16H13c.55 0 1-.45 1-1v-.17L12.17 13H7z",\n  fillRule: "evenodd"\n}));\n\nvar contrast = /*#__PURE__*/_react["default"].createElement("svg", {\n  width: "20",\n  height: "20",\n  viewBox: "0 0 20 20"\n}, /*#__PURE__*/_react["default"].createElement("path", {\n  d: "M19 8h-1.26c-.19-.73-.48-1.42-.85-2.06l.94-.94a.996.996 0 0 0 0-1.41l-1.41-1.41a.996.996 0 0 0-1.41 0l-.94.94c-.65-.38-1.34-.67-2.07-.86V1c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v1.26c-.76.2-1.47.5-2.13.89L5 2.28a.972.972 0 0 0-1.36 0L2.28 3.64c-.37.38-.37.98 0 1.36l.87.87c-.39.66-.69 1.37-.89 2.13H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h1.26c.19.73.48 1.42.85 2.06l-.94.94a.996.996 0 0 0 0 1.41l1.41 1.41c.39.39 1.02.39 1.41 0l.94-.94c.64.38 1.33.66 2.06.85V19c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1.26c.76-.2 1.47-.5 2.13-.89l.88.87c.37.37.98.37 1.36 0l1.36-1.36c.37-.38.37-.98 0-1.36l-.87-.87c.4-.65.7-1.37.89-2.13H19c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-9 7c-2.76 0-5-2.24-5-5s2.24-5 5-5v10z",\n  fillRule: "evenodd"\n}));\n\nvar styl = {\n  marginRight: 10\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      fontSize: 21,\n      color: \'green\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    style: styl,\n    type: chat,\n    color: "red"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    style: styl,\n    type: contrast,\n    spin: true\n  }));\n};\n\nreturn Demo;',language:"jsx",value:'import React from "react"\nimport { Icon } from \'uiw\';\n\nconst chat = (\n  <svg width="20" height="20" viewBox="0 0 20 20">\n    <path d="M19 0H7c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h5.59l3.71 3.71c.17.18.42.29.7.29.55 0 1-.45 1-1v-3h1c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zM7 13c-1.1 0-2-.9-2-2V4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h1v3a1.003 1.003 0 0 0 1.71.71L7.41 16H13c.55 0 1-.45 1-1v-.17L12.17 13H7z" fillRule="evenodd" />\n  </svg>\n)\nconst contrast = (\n  <svg width="20" height="20" viewBox="0 0 20 20">\n    <path d="M19 8h-1.26c-.19-.73-.48-1.42-.85-2.06l.94-.94a.996.996 0 0 0 0-1.41l-1.41-1.41a.996.996 0 0 0-1.41 0l-.94.94c-.65-.38-1.34-.67-2.07-.86V1c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v1.26c-.76.2-1.47.5-2.13.89L5 2.28a.972.972 0 0 0-1.36 0L2.28 3.64c-.37.38-.37.98 0 1.36l.87.87c-.39.66-.69 1.37-.89 2.13H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h1.26c.19.73.48 1.42.85 2.06l-.94.94a.996.996 0 0 0 0 1.41l1.41 1.41c.39.39 1.02.39 1.41 0l.94-.94c.64.38 1.33.66 2.06.85V19c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1.26c.76-.2 1.47-.5 2.13-.89l.88.87c.37.37.98.37 1.36 0l1.36-1.36c.37-.38.37-.98 0-1.36l-.87-.87c.4-.65.7-1.37.89-2.13H19c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-9 7c-2.76 0-5-2.24-5-5s2.24-5 5-5v10z" fillRule="evenodd" />\n  </svg>\n)\nconst styl = { marginRight: 10 };\n\nconst Demo = () => (\n  <div style={{ fontSize: 21, color: \'green\' }}>\n    <Icon style={styl} type={chat} color="red" />\n    <Icon style={styl} type={contrast} spin={true} />\n  </div>\n);\nexport default Demo'},307:{name:307,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _uiw = require(\"uiw\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar iconList = ['circle-o', 'down-square-o', 'down-square', 'up-square-o', 'up-square', 'left-square-o', 'left-square', 'right-square-o', 'right-square'];\nvar itemStyl = {\n  fontSize: 18,\n  minWidth: 120,\n  background: '#eaeaea',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: '20px 0',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fill: '#525252'\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n    style: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      marginBottom: -10,\n      marginRight: -10\n    }\n  }, iconList.map(function (type, idx) {\n    return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      key: idx,\n      style: itemStyl\n    }, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Icon, {\n      type: type\n    }), /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      style: {\n        color: '#525252',\n        fontSize: 12,\n        paddingTop: 8\n      }\n    }, type));\n  }));\n};\n\nreturn Demo;",language:"js",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'circle-o', 'down-square-o','down-square','up-square-o', 'up-square','left-square-o','left-square', 'right-square-o', 'right-square',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo"},336:{name:336,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _uiw = require(\"uiw\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar iconList = ['square-o', 'down-circle-o', 'down-circle', 'up-circle-o', 'up-circle', 'left-circle-o', 'left-circle', 'right-circle-o', 'right-circle', 'play-circle-o', 'play-circle'];\nvar itemStyl = {\n  fontSize: 18,\n  minWidth: 120,\n  background: '#eaeaea',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: '20px 0',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fill: '#525252'\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n    style: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      marginBottom: -10,\n      marginRight: -10\n    }\n  }, iconList.map(function (type, idx) {\n    return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      key: idx,\n      style: itemStyl\n    }, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Icon, {\n      type: type\n    }), /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      style: {\n        color: '#525252',\n        fontSize: 12,\n        paddingTop: 8\n      }\n    }, type));\n  }));\n};\n\nreturn Demo;",language:"js",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'square-o', 'down-circle-o', 'down-circle','up-circle-o','up-circle','left-circle-o', 'left-circle','right-circle-o', 'right-circle','play-circle-o',  'play-circle',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo"},364:{name:364,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _uiw = require(\"uiw\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar iconList = ['down', 'up', 'left', 'right', 'caret-down', 'caret-up', 'caret-left', 'caret-right', 'arrow-down', 'arrow-up', 'arrow-left', 'arrow-right', 'shrink', 'arrows-alt', 'd-arrow-left', 'd-arrow-right', 'enter', 'rollback', 'd-caret', 'backward', 'forward', 'logout', 'login', 'swap-left', 'swap-right', 'swap', 'verticle-left', 'verticle-right', 'menu', 'menu-fold', 'menu-unfold'];\nvar itemStyl = {\n  fontSize: 18,\n  minWidth: 120,\n  background: '#eaeaea',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: '20px 0',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fill: '#525252'\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n    style: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      marginBottom: -10,\n      marginRight: -10\n    }\n  }, iconList.map(function (type, idx) {\n    return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      key: idx,\n      style: itemStyl\n    }, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Icon, {\n      type: type\n    }), /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      style: {\n        color: '#525252',\n        fontSize: 12,\n        paddingTop: 8\n      }\n    }, type));\n  }));\n};\n\nreturn Demo;",language:"js",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'down', 'up', 'left', 'right', 'caret-down', 'caret-up', 'caret-left', 'caret-right', 'arrow-down', 'arrow-up', 'arrow-left', 'arrow-right',\n  'shrink','arrows-alt','d-arrow-left','d-arrow-right','enter',\n  'rollback', 'd-caret','backward','forward',  'logout', 'login', 'swap-left', 'swap-right', 'swap',\n  'verticle-left', 'verticle-right', 'menu','menu-fold', 'menu-unfold',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo"},396:{name:396,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _uiw = require(\"uiw\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar iconList = ['smile-o', 'smile', 'frown-o', 'frown', 'meh-o', 'meh', 'pause-circle-o', 'pause', 'pause-circle', 'information-o', 'information', 'warning-o', 'warning', 'question-circle-o', 'question-circle', 'stop-o', 'stop'];\nvar itemStyl = {\n  fontSize: 18,\n  minWidth: 120,\n  background: '#eaeaea',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: '20px 0',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fill: '#525252'\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n    style: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      marginBottom: -10,\n      marginRight: -10\n    }\n  }, iconList.map(function (type, idx) {\n    return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      key: idx,\n      style: itemStyl\n    }, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Icon, {\n      type: type\n    }), /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      style: {\n        color: '#525252',\n        fontSize: 12,\n        paddingTop: 8\n      }\n    }, type));\n  }));\n};\n\nreturn Demo;",language:"js",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'smile-o', 'smile','frown-o', 'frown', 'meh-o', 'meh',\n  'pause-circle-o', 'pause', 'pause-circle', 'information-o', 'information', 'warning-o', 'warning',\n  'question-circle-o', 'question-circle', 'stop-o', 'stop',\n];\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo"},427:{name:427,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _uiw = require(\"uiw\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar iconList = ['plus', 'plus-circle-o', 'plus-circle', 'plus-square', 'plus-square-o', 'minus', 'minus-circle-o', 'minus-circle', 'minus-square', 'minus-square-o', 'close', 'circle-close-o', 'circle-close', 'close-square', 'close-square-o', 'asterisk', 'check', 'circle-check-o', 'circle-check', 'check-square', 'check-square-o', 'copyright'];\nvar itemStyl = {\n  fontSize: 18,\n  minWidth: 120,\n  background: '#eaeaea',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: '20px 0',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fill: '#525252'\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n    style: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      marginBottom: -10,\n      marginRight: -10\n    }\n  }, iconList.map(function (type, idx) {\n    return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      key: idx,\n      style: itemStyl\n    }, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Icon, {\n      type: type\n    }), /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      style: {\n        color: '#525252',\n        fontSize: 12,\n        paddingTop: 8\n      }\n    }, type));\n  }));\n};\n\nreturn Demo;",language:"js",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n 'plus', 'plus-circle-o','plus-circle', 'plus-square', 'plus-square-o',\n 'minus', 'minus-circle-o', 'minus-circle', 'minus-square', 'minus-square-o',\n 'close','circle-close-o', 'circle-close','close-square', 'close-square-o', 'asterisk',\n  'check', 'circle-check-o', 'circle-check','check-square','check-square-o', 'copyright',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo"},459:{name:459,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _uiw = require(\"uiw\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar iconList = ['file-text', 'file-jpg', 'file-unknown', 'file-add', 'file-excel', 'file-pdf', 'folder-add', 'folder-open', 'paper-clip'];\nvar itemStyl = {\n  fontSize: 18,\n  minWidth: 120,\n  background: '#eaeaea',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: '20px 0',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fill: '#525252'\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n    style: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      marginBottom: -10,\n      marginRight: -10\n    }\n  }, iconList.map(function (type, idx) {\n    return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      key: idx,\n      style: itemStyl\n    }, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Icon, {\n      type: type\n    }), /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      style: {\n        color: '#525252',\n        fontSize: 12,\n        paddingTop: 8\n      }\n    }, type));\n  }));\n};\n\nreturn Demo;",language:"js",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'file-text', 'file-jpg', 'file-unknown', 'file-add', 'file-excel', 'file-pdf',\n  'folder-add', 'folder-open', 'paper-clip',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo"},489:{name:489,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _uiw = require(\"uiw\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar iconList = ['heart-off', 'heart-on', 'star-on', 'star-off', 'lock', 'unlock', 'dashboard', 'area-chart', 'bar-chart', 'dot-chart', 'pie-chart', 'dislike-o', 'like-o', 'loading', 'reload', 'appstore', 'appstore-o', 'tag', 'tag-o', 'tags', 'tags-o', 'setting', 'setting-o', 'map', 'table', 'qrcode', 'barcode', 'printer', 'cloud-upload', 'cloud-upload-o', 'cloud-download', 'cloud-download-o', 'download', 'message', 'mail', 'mail-o', 'user', 'user-add', 'user-delete', 'usergroup-add', 'usergroup-delete', 'zoom-in', 'zoom-out', 'time', 'time-o', 'bell', 'camera-o', 'coffee', 'document', 'delete', 'date', 'edit', 'eye-o', 'environment-o', 'filter', 'global', 'inbox', 'home', 'laptop', 'link', 'copy', 'more', 'shopping-cart', 'search', 'save', 'safety', 'poweroff', 'picasa', 'notification', 'pay-circle-o', 'pay', 'picture', 'woman', 'man', 'verification', 'wifi', 'video-camera', 'mobile'];\nvar itemStyl = {\n  fontSize: 18,\n  minWidth: 120,\n  background: '#eaeaea',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: '20px 0',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fill: '#525252'\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n    style: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      marginBottom: -10,\n      marginRight: -10\n    }\n  }, iconList.map(function (type, idx) {\n    return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      key: idx,\n      style: itemStyl\n    }, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Icon, {\n      type: type\n    }), /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      style: {\n        color: '#525252',\n        fontSize: 12,\n        paddingTop: 8\n      }\n    }, type));\n  }));\n};\n\nreturn Demo;",language:"js",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'heart-off', 'heart-on', 'star-on', 'star-off','lock', 'unlock','dashboard',\n  'area-chart', 'bar-chart', 'dot-chart','pie-chart',\n  'dislike-o', 'like-o','loading', 'reload','appstore', 'appstore-o',\n  'tag', 'tag-o','tags','tags-o', 'setting','setting-o','map','table','qrcode','barcode','printer',\n  'cloud-upload','cloud-upload-o', 'cloud-download','cloud-download-o', 'download','message', 'mail', 'mail-o',\n  'user', 'user-add', 'user-delete', 'usergroup-add', 'usergroup-delete', 'zoom-in', 'zoom-out','time', 'time-o',\n  'bell', 'camera-o', 'coffee', 'document', 'delete', 'date', 'edit',  'eye-o', 'environment-o', 'filter', 'global', 'inbox', 'home', 'laptop', 'link', 'copy', 'more', 'shopping-cart', 'search', 'save', 'safety', 'poweroff', 'picasa', 'notification',\n  'pay-circle-o', 'pay', 'picture', 'woman', 'man', 'verification', 'wifi', 'video-camera', 'mobile'\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo"},525:{name:525,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _uiw = require(\"uiw\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar iconList = ['uiw', 'windows', 'linux', 'apple', 'facebook', 'twitter', 'adobe', 'baidu', 'alipay', 'android-o', 'android', 'reddit', 'github', 'github-o', 'aliwangwang', 'dingding', 'foursquare', 'linkedin', 'pinterest', 'qq', 'weibo', 'taobao', 'weixin', 'css3', 'html5'];\nvar itemStyl = {\n  fontSize: 18,\n  minWidth: 120,\n  background: '#eaeaea',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: '20px 0',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fill: '#525252'\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n    style: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      marginBottom: -10,\n      marginRight: -10\n    }\n  }, iconList.map(function (type, idx) {\n    return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      key: idx,\n      style: itemStyl\n    }, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Icon, {\n      type: type\n    }), /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      style: {\n        color: '#525252',\n        fontSize: 12,\n        paddingTop: 8\n      }\n    }, type));\n  }));\n};\n\nreturn Demo;",language:"js",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = ['uiw', 'windows', 'linux', 'apple', 'facebook', 'twitter', 'adobe', 'baidu', 'alipay', 'android-o', 'android','reddit', 'github', 'github-o', 'aliwangwang',   'dingding', 'foursquare', 'linkedin', 'pinterest', 'qq',  'weibo', 'taobao', 'weixin', 'css3', 'html5'];\n\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo"},553:{name:553,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar iconList = ["chrome", "safari", "firefox", "opera", "ie"];\nvar itemStyl = {\n  fontSize: 18,\n  minWidth: 120,\n  background: \'#eaeaea\',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: \'20px 0\',\n  display: \'flex\',\n  flexDirection: \'column\',\n  alignItems: \'center\',\n  justifyContent: \'center\',\n  fill: \'#525252\'\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      display: \'flex\',\n      flexWrap: \'wrap\',\n      marginBottom: -10,\n      marginRight: -10\n    }\n  }, iconList.map(function (type, idx) {\n    return /*#__PURE__*/_react["default"].createElement("div", {\n      key: idx,\n      style: itemStyl\n    }, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n      type: type\n    }), /*#__PURE__*/_react["default"].createElement("div", {\n      style: {\n        color: \'#525252\',\n        fontSize: 12,\n        paddingTop: 8\n      }\n    }, type));\n  }));\n};\n\nreturn Demo;',language:"js",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [ \"chrome\", \"safari\", \"firefox\", \"opera\", \"ie\", ];\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo"}},source:"Icon \u56fe\u6807\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-icon/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-icon.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-icon)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-icon.svg?label=@uiw/react-icon)](https://npmjs.com/@uiw/react-icon)\n\n\u8bed\u4e49\u5316\u7684\u77e2\u91cf\u56fe\u5f62\uff0c\u5185\u7f6e\u7684\u56fe\u6807\u5c5e\u4e8eUI\u6846\u67b6\u5e38\u7528\u56fe\u5f62\u5b57\u4f53\u3002icon\u5b57\u4f53\u4ee5\u53ca\u6837\u5f0f\uff0c\u88ab\u62bd\u79bb\u5230\u4e00\u4e2a\u65b0\u7684\u4ed3\u5e93 [uiw icon](https://uiwjs.github.io/icons/) \uff0c`uiw`\u53bb\u4f9d\u8d56 [uiw-iconfont](https://github.com/uiwjs/icons)\uff0c\u8fd9\u4e2a\u4ed3\u5e93\u4e3b\u8981\u662f\u7ef4\u62a4\u4e00\u5957svg\u56fe\u7247\uff0c\u5e76\u5c06svg\u56fe\u7247\u8f6c\u6362\u4e3a `*.symbol.svg` `*.ttf` `*.woff` `*.woff2` `*.eot` `svgPaths.json` \u7b49\u5b57\u4f53\u53ca\u76f8\u5173\u6587\u4ef6\u5e76\u53d1\u5e03\u5230 [npm](https://www.npmjs.com/package/uiw-iconfont) \u4e0a\u53bb\u3002\n\n```jsx\nimport { Icon } from 'uiw';\n// or\nimport Icon from '@uiw/react-icon';\n```\n\n### \u641c\u7d22\u56fe\u6807\n\n```jsx mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Input, CopyToClipboard, Icon, Notify } from 'uiw';\n\nconst icons = [\"adobe\", \"alipay\", \"aliwangwang\", \"android-o\", \"android\", \"apple\", \"appstore-o\", \"appstore\", \"area-chart\", \"down\", \"left\", \"right\", \"up\", \"arrow-down\", \"arrow-left\", \"arrow-right\", \"arrow-up\", \"arrows-alt\", \"asterisk\", \"backward\", \"baidu\", \"bar-chart\", \"barcode\", \"bell\", \"camera-o\", \"caret-down\", \"caret-left\", \"caret-right\", \"caret-up\", \"check-square-o\", \"check-square\", \"check\", \"chrome\", \"circle-check-o\", \"circle-check\", \"circle-close-o\", \"circle-close\", \"close-square-o\", \"close-square\", \"close\", \"cloud-download-o\", \"cloud-download\", \"cloud-upload-o\", \"cloud-upload\", \"coffee\", \"component\", \"copy\", \"copyright\", \"css3\", \"cut\", \"d-arrow-left\", \"d-arrow-right\", \"d-caret\", \"dashboard\", \"date\", \"delete\", \"dingding\", \"dislike-o\", \"document\", \"dot-chart\", \"circle-o\", \"down-circle-o\", \"down-circle\", \"down-square-o\", \"down-square\", \"square-o\", \"download\", \"edit\", \"enter\", \"environment-o\", \"environment\", \"eye-o\", \"eye\", \"facebook\", \"file-add\", \"file-excel\", \"file-jpg\", \"file-pdf\", \"file-text\", \"file-unknown\", \"filter\", \"firefox\", \"folder-add\", \"folder-open\", \"folder\", \"forward\", \"foursquare\", \"frown-o\", \"frown\", \"github-o\", \"github\", \"global\", \"heart-off\", \"heart-on\", \"home\", \"html5\", \"ie\", \"inbox\", \"information-o\", \"information\", \"laptop\", \"left-circle-o\", \"left-circle\", \"left-square-o\", \"left-square\", \"like-o\", \"link\", \"linkedin\", \"linux\", \"loading\", \"lock\", \"login\", \"logout\", \"man\", \"map\", \"meh-o\", \"meh\", \"menu-fold\", \"menu-unfold\", \"menu\", \"mail\", \"mail-o\", \"message\", \"minus-circle-o\", \"minus-circle\", \"minus-square-o\", \"minus-square\", \"minus\", \"mobile\", \"more\", \"notification\", \"opera\", \"paper-clip\", \"pause-circle-o\", \"pause-circle\", \"pause\", \"pay-circle-o\", \"pay\", \"picasa\", \"picture\", \"pie-chart\", \"pinterest\", \"play-circle-o\", \"play-circle\", \"plus-circle-o\", \"plus-circle\", \"plus-square-o\", \"plus-square\", \"plus\", \"poweroff\", \"printer\", \"qq\", \"qrcode\", \"question-circle-o\", \"question-circle\", \"reddit\", \"reload\", \"right-circle-o\", \"right-circle\", \"right-square-o\", \"right-square\", \"rollback\", \"safari\", \"safety\", \"save\", \"search\", \"setting-o\", \"setting\", \"share\", \"shopping-cart\", \"shrink\", \"smile-o\", \"smile\", \"star-off\", \"star-on\", \"swap-left\", \"swap-right\", \"swap\", \"table\", \"tag-o\", \"tag\", \"tags-o\", \"tags\", \"taobao\", \"time-o\", \"time\", \"twitter\", \"uiw\", \"unlock\", \"up-circle-o\", \"up-circle\", \"up-square-o\", \"up-square\", \"upload\", \"user-add\", \"user-delete\", \"user\", \"usergroup-add\", \"usergroup-delete\", \"verification\", \"verticle-left\", \"verticle-right\", \"video-camera\", \"warning-o\", \"warning\", \"weibo\", \"weixin\", \"wifi\", \"windows\", \"woman\", \"zoom-in\", \"zoom-out\", 'stop-o', 'stop'];\nconst itemStyl = {\n  fontSize: 26, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', justifyContent: 'center', fill: '#525252',\n}\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      len: 0,\n      result: [],\n    }\n  }\n  onChange(env) {\n    const value = env.target.value;\n    const data = value ? icons.filter((item) => item.indexOf(value) > -1) : [];\n    const len = data.length;\n    const result = data.splice(0, 15);\n    this.setState({ len, result });\n  }\n  render() {\n    const { len, result } = this.state;\n    return (\n      <div>\n        <Input preIcon=\"search\" placeholder=\"\u8bf7\u8f93\u5165\u56fe\u6807\u540d\u79f0\" type=\"text\" style={{ maxWidth: 200 }} onChange={this.onChange.bind(this)} />\n        <div style={{ padding: '10px 0' }}>\n          \u641c\u7d22\u5230 {this.state.len} \u4e2a\u7ed3\u679c{len > 0 && <span>\uff0c\u4e0b\u9762\u5c55\u793a {len > 15 ? '15' : len} \u4e2a\u56fe\u6807\uff0c\u53ef\u4ee5\u70b9\u51fb\u590d\u5236\u56fe\u6807\u4ee3\u7801: </span>}\n        </div>\n        <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n          {result.map((type, idx) => {\n            const iconTxt = `<Icon type=\"${type}\" />`;\n            return (\n              <CopyToClipboard\n                key={idx}\n                style={itemStyl}\n                text={iconTxt}\n                onClick={() => {\n                  Notify.success({\n                    title: '\u4f60\u5df2\u590d\u5236\u5185\u5bb9\uff01',\n                    description: (\n                      <span>\n                        \u5df2\u590d\u5236 <b style={{ color: 'red' }}>{iconTxt}</b> \u53ef\u4ee5\u53bb\u7c98\u8d34\u4e86\uff01\n                      </span>\n                    ),\n                  });\n                }}\n              >\n                <div key={idx}>\n                  <Icon type={type} />\n                  <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n                </div>\n              </CopyToClipboard>\n            )\n          })}\n        </div>\n      </div>\n    );\n  }\n}\nexport default Demo\n```\n\n## \u5982\u4f55\u4f7f\u7528\n\n\u4f7f\u7528`<Icon />`\u7ec4\u4ef6\uff0c\u6307\u5b9a\u56fe\u6807\u5bf9\u5e94\u7684`type`\u5c5e\u6027\uff0c\u793a\u4f8b\u4ee3\u7801\uff1a\n\n```jsx\nimport { Icon } from 'uiw';\n```\n\n```jsx\n<Icon type=\"minus\" />\n```\n\n\u6e32\u67d3\u4e3a\n\n```jsx\n<span class=\"w-icon w-icon-middle\">\n  <svg viewBox=\"0 0 24 24\">\n    <path d=\"M16.038 3.176c2.313-.551 4.58.248 5.648 1.603.985 1.25 1.433 2.55 1.287 4.468-.105 1.383-.55 2.408-1.428 3.536-.162.208-.34.421-.563.68-.13.153-.628.72-.602.692-.88 1.008-3.471 3.535-7.814 7.62a.83.83 0 0 1-1.139-.003c-3.728-3.55-6.141-5.888-7.248-7.022-2.043-2.094-2.82-3.31-3.102-5.276-.295-2.055.27-3.742 1.538-5.053 1.19-1.229 3.319-1.684 5.42-1.25 1.231.254 2.542 1.072 3.961 2.436 1.21-1.261 2.56-2.077 4.042-2.43z\" fill-rule=\"evenodd\">\n    </path>\n  </svg>\n</span>\n```\n\n\u793a\u4f8b\u5982\u4e0b:\n\n```jsx\nconst Demo = () => (\n  <div>\n    <Icon type=\"arrow-down\" />\n    <Icon type=\"minus\" />\n    <Icon type=\"plus\" />\n    <Icon type=\"check\" />\n    <Icon type=\"close\" />\n  </div>\n)\n```\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst Demo =()=>(\n  <div style={{ fontSize: 18, lineHeight: '12px' }}>\n    <Icon type=\"heart-on\" />\n    <Icon type=\"pie-chart\" />\n    <Icon type=\"tag\" />\n  </div>\n);\nexport default Demo\n\n```\n\n### \u56fe\u6807\u5c3a\u5bf8\n\n\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u56fe\u6807\u975e\u5e38\u5c0f\uff0c\u5b83\u4eec\u7ee7\u627f\u4e86\u7236\u7ea7\u7684\u5b57\u4f53\u5927\u5c0f\u3002 \u5982\u679c\u6ca1\u6709\u8bbe\u7f6e\u5b57\u4f53\u5927\u5c0f\uff0c\u53ef\u4ee5\u901a\u8fc7 `size` \u6765\u8bbe\u7f6e\u5c3a\u5bf8\u3002\u901a\u5e38\u60c5\u51b5 `size` \u4f1a\u5f88\u7d2f\u8d58\u6ca1\u6709\u4ec0\u4e48\u7528\u3002\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst Demo = () => (\n  <div style={{ fontSize: '28px' }}>\n    <Icon type=\"heart-on\" />\n    <Icon type=\"pie-chart\" />\n    <Icon type=\"tag\" />\n  </div>\n);\nexport default Demo\n```\n\n### \u56fe\u6807\u989c\u8272\n\n\u9ed8\u8ba4\u7eaf\u9ed1\u8272\u56fe\u6807\uff0c\u5f53\u524d\u56fe\u6807\u662f svg \u683c\u5f0f\u5c55\u793a\uff0c\u5728\u4e3aSVG\u8bbe\u7f6e\u6837\u5f0f\u65f6\uff0c\u8bf7\u4f7f\u7528 `fill` \u6216 `stroke` \u5c5e\u6027\u800c\u4e0d\u662f `color`\u3002 \u8fd9\u4e9b\u53ef\u4ee5\u76f4\u63a5\u5728 `Icon` \u4e0a\u8bbe\u7f6e\u4e3a `style` \u6216\u901a\u8fc7 `CSS` \u8bbe\u7f6e\u3002\n\n> \u4e00\u4e2a\u6709\u7528\u7684\u6280\u5de7\u662f\u5c06 `fill` \u8bbe\u7f6e\u4e3a `currentColor`\uff0c\u4ee5\u4fbf\u4ece\u56fe\u6807\u5bb9\u5668\u7684\u6587\u672c\u989c\u8272\u7ee7\u627f\u586b\u5145\u989c\u8272\u3002\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst Demo = () => (\n  <div style={{ fontSize: '28px',color: 'green' }}>\n    <Icon type=\"apple\" color=\"red\" />\n    <Icon type=\"pie-chart\" style={{fill: 'currentColor'}} />\n    <Icon type=\"frown\" style={{fill: 'blue'}} />\n    <Icon type=\"uiw\" style={{stroke: 'red',fill: '#ffef00'}} />\n  </div>\n);\nexport default Demo\n```\n\n### \u4e0e\u6587\u672c\u5bf9\u9f50\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <h3 style={{ margin: 0 }}>Exit <Icon verticalAlign=\"baseline\" type=\"baidu\" /></h3>\n    <span>uiw</span><Icon type=\"uiw\" verticalAlign=\"baseline\" style={{ fill: '#009688', fontSize: 21 }} />\n  </div>\n);\nexport default Demo\n```\n\n### \u56fe\u6807\u7684\u547d\u540d\u89c4\u8303\n\n\u6211\u4eec\u4e3a\u6bcf\u4e2a\u56fe\u6807\u8d4b\u4e88\u4e86\u8bed\u4e49\u5316\u7684\u547d\u540d\uff0c\u547d\u540d\u89c4\u5219\u5982\u4e0b:\n\n> \\[\u5f62\u72b6?\\]-\\[\u56fe\u6807\u540d\\]-\\[\u63cf\u7ebf?\\]-\\[\u65b9\u5411?\\]\n> \u65b9\u5411\uff1a`down`\u3001`up`\u3001`left`\u3001`right`\n> \u63cf\u7ebf\uff1a`-o` \u56fe\u6807\u6dfb\u52a0\u8fb9\u6846\u63cf\u7ebf\n> \u9ed8\u8ba4\uff1a`w-icon-` \u9ed8\u8ba4\u5f15\u7528\u7684\u5b57\u4f53\u6587\u4ef6\u4f5c\u7528\u57df\n> \u81ea\u5b9a\u5b9a\u4e49\uff1a`w-icon-uiw-` \u81ea\u5b9a\u5b9a\u4e49\u4f5c\u7528\u57df\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <Icon type=\"circle-close\" verticalAlign=\"baseline\" />  \u56fe\u6807\u540d\u79f0\uff1acircle-close\uff0c[circle\u5708]-[\u5173\u95edclose]\n    <br/>\n    <Icon type=\"circle-close-o\" verticalAlign=\"baseline\" /> \u56fe\u6807\u540d\u79f0\uff1acircle-close-o\uff0c[circle\u5708]-[\u5173\u95edclose]-[o\u63cf\u7ebf]\n  </div>\n);\nexport default Demo\n```\n\n### \u56fe\u6807\u65cb\u8f6c\u5b9e\u4f8b\n\n\u901a\u8fc7\u8bbe\u7f6e\u53c2\u6570 `spin={true}` \u6765\u8bbe\u7f6e\u56fe\u6807\u65cb\u8f6c\u3002\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst Demo = () => (\n  <div style={{ fontSize: 21, color: 'green' }}>\n    <Icon type=\"loading\" spin={true} color=\"red\" />\n    <Icon type=\"reload\" spin={true} />\n    <Icon type=\"picasa\" spin={true} style={{fill: 'blue'}} />\n    <Icon type=\"smile-o\" spin={true} style={{fill: 'blue'}} />\n  </div>\n);\nexport default Demo\n```\n\n### \u81ea\u5b9a\u4e49\u56fe\u6807\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst chat = (\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n    <path d=\"M19 0H7c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h5.59l3.71 3.71c.17.18.42.29.7.29.55 0 1-.45 1-1v-3h1c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zM7 13c-1.1 0-2-.9-2-2V4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h1v3a1.003 1.003 0 0 0 1.71.71L7.41 16H13c.55 0 1-.45 1-1v-.17L12.17 13H7z\" fillRule=\"evenodd\" />\n  </svg>\n)\nconst contrast = (\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n    <path d=\"M19 8h-1.26c-.19-.73-.48-1.42-.85-2.06l.94-.94a.996.996 0 0 0 0-1.41l-1.41-1.41a.996.996 0 0 0-1.41 0l-.94.94c-.65-.38-1.34-.67-2.07-.86V1c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v1.26c-.76.2-1.47.5-2.13.89L5 2.28a.972.972 0 0 0-1.36 0L2.28 3.64c-.37.38-.37.98 0 1.36l.87.87c-.39.66-.69 1.37-.89 2.13H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h1.26c.19.73.48 1.42.85 2.06l-.94.94a.996.996 0 0 0 0 1.41l1.41 1.41c.39.39 1.02.39 1.41 0l.94-.94c.64.38 1.33.66 2.06.85V19c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1.26c.76-.2 1.47-.5 2.13-.89l.88.87c.37.37.98.37 1.36 0l1.36-1.36c.37-.38.37-.98 0-1.36l-.87-.87c.4-.65.7-1.37.89-2.13H19c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-9 7c-2.76 0-5-2.24-5-5s2.24-5 5-5v10z\" fillRule=\"evenodd\" />\n  </svg>\n)\nconst styl = { marginRight: 10 };\n\nconst Demo = () => (\n  <div style={{ fontSize: 21, color: 'green' }}>\n    <Icon style={styl} type={chat} color=\"red\" />\n    <Icon style={styl} type={contrast} spin={true} />\n  </div>\n);\nexport default Demo\n```\n\n## \u5b57\u4f53\u56fe\u6807\n\n\u901a\u8fc7\u5f15\u5165 [uiw-iconfont](https://github.com/uiwjs/icons) \u5b57\u4f53\u6837\u5f0f\uff0c\u5728 [uiw-iconfont\u5b98\u7f51](https://uiwjs.github.io/icons) \u627e\u5230\u5bf9\u5e94\u7684\u56fe\u6807\u540d\u79f0\uff0c\u5c31\u53ef\u4ee5\u4f7f\u7528\u4e86\uff0c`uiw` \u5df2\u7ecf\u4f9d\u8d56 `uiw-iconfont` \u4f60\u65e0\u9700\u5b89\u88c5\u5373\u53ef\u4f7f\u7528\uff0c\u66f4\u591a\u4f7f\u7528\u65b9\u6cd5[\u67e5\u770b\u5b98\u65b9\u6587\u6863](https://github.com/uiwjs/icons)\u3002\n\n```bash\n# \u5982\u679c\u4f60\u6ca1\u6709\u5b89\u88c5\uff0c\u53ef\u5355\u72ec\u4f7f\u7528\uff0c\u5b89\u88c5\nnpm i uiw-iconfont --save\n```\n\n\u5f15\u5165\u5b57\u4f53\u6837\u5f0f\n\n```jsx\nimport 'uiw-iconfont/fonts/w-icon.css';\n```\n\n\u5728 HTML \u4e2d\u4f7f\u7528\uff1a\n\n```html\n<i className=\"w-icon-apple\"></i>\n```\n\n\u5728 React \u4e2d\u4f7f\u7528\uff1a\n\n```jsx\nconst Demo = () => (\n  <div style={{ color: 'green' }}>\n    <i className=\"w-icon-apple\" />\n    <i className=\"w-icon-appstore\" />\n  </div>\n)\n```\n\n## API\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| type | \u56fe\u6807\u7684\u540d\u79f0 | String/ReactNode | - |\n| spin | \u662f\u5426\u6709\u65cb\u8f6c\u52a8\u753b |  Boolean | `false` |\n| verticalAlign | \u5782\u76f4\u5bf9\u9f50\u65b9\u5f0f | Enum {baseline, middle} | `baseline` |\n| style | \u8bbe\u7f6e\u56fe\u6807\u7684\u6837\u5f0f\uff0c\u4f8b\u5982 `fill` \u548c `stroke` | Object | - |\n\n\n## \u6240\u6709\u56fe\u6807\n\n### \u65b9\u5411\u6027\u56fe\u6807\n\n```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'circle-o', 'down-square-o','down-square','up-square-o', 'up-square','left-square-o','left-square', 'right-square-o', 'right-square',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo\n```\n\n\u5706\u5708\u65b9\u5411\u6027\u56fe\u6807\n\n```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'square-o', 'down-circle-o', 'down-circle','up-circle-o','up-circle','left-circle-o', 'left-circle','right-circle-o', 'right-circle','play-circle-o',  'play-circle',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo\n```\n\n\u5176\u5b83\u65b9\u5411\u6027\u56fe\u6807\n\n```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'down', 'up', 'left', 'right', 'caret-down', 'caret-up', 'caret-left', 'caret-right', 'arrow-down', 'arrow-up', 'arrow-left', 'arrow-right',\n  'shrink','arrows-alt','d-arrow-left','d-arrow-right','enter',\n  'rollback', 'd-caret','backward','forward',  'logout', 'login', 'swap-left', 'swap-right', 'swap',\n  'verticle-left', 'verticle-right', 'menu','menu-fold', 'menu-unfold',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo\n```\n\n### \u63d0\u793a\u5efa\u8bae\u6027\u56fe\u6807\n\n```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'smile-o', 'smile','frown-o', 'frown', 'meh-o', 'meh',\n  'pause-circle-o', 'pause', 'pause-circle', 'information-o', 'information', 'warning-o', 'warning',\n  'question-circle-o', 'question-circle', 'stop-o', 'stop',\n];\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo\n```\n\n## \u7b26\u53f7\n\n```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n 'plus', 'plus-circle-o','plus-circle', 'plus-square', 'plus-square-o',\n 'minus', 'minus-circle-o', 'minus-circle', 'minus-square', 'minus-square-o',\n 'close','circle-close-o', 'circle-close','close-square', 'close-square-o', 'asterisk',\n  'check', 'circle-check-o', 'circle-check','check-square','check-square-o', 'copyright',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo\n```\n\n### \u6587\u4ef6\n\n```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'file-text', 'file-jpg', 'file-unknown', 'file-add', 'file-excel', 'file-pdf',\n  'folder-add', 'folder-open', 'paper-clip',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo\n```\n\n### \u5176\u5b83\n\n```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'heart-off', 'heart-on', 'star-on', 'star-off','lock', 'unlock','dashboard',\n  'area-chart', 'bar-chart', 'dot-chart','pie-chart',\n  'dislike-o', 'like-o','loading', 'reload','appstore', 'appstore-o',\n  'tag', 'tag-o','tags','tags-o', 'setting','setting-o','map','table','qrcode','barcode','printer',\n  'cloud-upload','cloud-upload-o', 'cloud-download','cloud-download-o', 'download','message', 'mail', 'mail-o',\n  'user', 'user-add', 'user-delete', 'usergroup-add', 'usergroup-delete', 'zoom-in', 'zoom-out','time', 'time-o',\n  'bell', 'camera-o', 'coffee', 'document', 'delete', 'date', 'edit',  'eye-o', 'environment-o', 'filter', 'global', 'inbox', 'home', 'laptop', 'link', 'copy', 'more', 'shopping-cart', 'search', 'save', 'safety', 'poweroff', 'picasa', 'notification',\n  'pay-circle-o', 'pay', 'picture', 'woman', 'man', 'verification', 'wifi', 'video-camera', 'mobile'\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo\n```\n\n### \u54c1\u724c\u6807\u8bc6\n\n```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = ['uiw', 'windows', 'linux', 'apple', 'facebook', 'twitter', 'adobe', 'baidu', 'alipay', 'android-o', 'android','reddit', 'github', 'github-o', 'aliwangwang',   'dingding', 'foursquare', 'linkedin', 'pinterest', 'qq',  'weibo', 'taobao', 'weixin', 'css3', 'html5'];\n\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo\n```\n\n### \u6d4f\u89c8\u5668\u56fe\u6807\n\n```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [ \"chrome\", \"safari\", \"firefox\", \"opera\", \"ie\", ];\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo\n```\n"}}}]);
-//# sourceMappingURL=8822.ae88e086.chunk.js.map