@uiw/doc
Version:
UIW documentation website.
1 lines • 59.9 kB
JavaScript
(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6074],{4934:e=>{function t(e){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}t.keys=()=>[],t.resolve=t,t.id=4934,e.exports=t},5301:(e,t,n)=>{"use strict";n.d(t,{Z:()=>d});var r=n(8573),u=n(6320),o=n(8563),i=n(7622),l=n(7937);const a={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"};var s=n(4760);function c(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const{path:t}=e,n=/^http/.test(t||"")?t:"https://github.com/uiwjs/uiw/blob/master/".concat(t);return(0,s.jsxs)("div",{className:a.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",n&&(0,s.jsx)("a",{href:n,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,s.jsx)("br",{}),(0,s.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,s.jsx)(l.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,s.jsx)(l.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,s.jsx)(l.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,s.jsx)(l.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,s.jsx)(l.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const f=u.ZP.Preview,p=u.ZP.Code,b=u.ZP.Toolbar,_=e=>{var t,n;let{node:i,components:l,data:a,...c}=e;const _=(0,r.useRef)(null),{headings:d,headingsList:m,...E}=c;(0,r.useEffect)((()=>{if(_.current){const e=_.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(_.current,e)}}),[_]);const y=null===i||void 0===i||null===(t=i.position)||void 0===t?void 0:t.start.line,h=null===i||void 0===i||null===(n=i.data)||void 0===n?void 0:n.meta,C=(0,o.Mx)(h)||String(y),v=l["".concat(C)];if(C&&"function"===typeof v){const e=a[C].value||"",t=(0,o.aE)(h||"");return(0,s.jsxs)(u.ZP,{ref:_,children:[(0,s.jsx)(f,{style:{background:t.bg||"transparent"},children:(0,s.jsx)(v,{})}),(0,s.jsx)(b,{text:e,children:t.title||"Example"}),(0,s.jsx)(p,{children:(0,s.jsx)("pre",{...E})})]})}return(0,s.jsx)("code",{...E})};function d(e){return(0,s.jsxs)(r.Fragment,{children:[(0,s.jsx)(i.Z,{className:a.markdownWrap,source:e.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:t=>(0,s.jsx)(_,{...e,...t})}}),(0,s.jsx)(c,{path:e.path})]})}},8518:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>i});const r={components:{19:function(){function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}var t,r=(t=n(8573))&&t.__esModule?t:{default:t},u=n(7937);function o(e,t){if(n=e,!(null!=(r=t)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](n):n instanceof r))throw new TypeError("Cannot call a class as a function");var n,r}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,l(r.key),r)}}function l(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var u=r.call(t,n||"default");if("object"!==e(u))return u;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}function a(e,t){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},a(e,t)}function s(t){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,u=c(t);if(n){var o=c(this).constructor;r=Reflect.construct(u,arguments,o)}else r=u.apply(this,arguments);return function(t,n){if(n&&("object"===e(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(this,r)}}function c(e){return c=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},c(e)}return function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&a(e,t)}(f,e);var t,n,l,c=s(f);function f(){var e;return o(this,f),(e=c.call(this)).state={visible:!1},e}return t=f,(n=[{key:"onClick",value:function(){this.setState({visible:!this.state.visible})}},{key:"onClose",value:function(){this.setState({visible:!1})}},{key:"render",value:function(){return r.default.createElement("div",null,r.default.createElement(u.Drawer,{title:"\u62bd\u5c49\u6807\u9898",isOpen:this.state.visible,onClose:this.onClose.bind(this)},"React \u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u754c\u9762\u3002\u4e3a\u4f60\u5e94\u7528\u7684\u6bcf\u4e00\u4e2a\u72b6\u6001\u8bbe\u8ba1\u7b80\u6d01\u7684\u89c6\u56fe\uff0c\u5728\u6570\u636e\u6539\u53d8\u65f6 React \u4e5f\u53ef\u4ee5\u9ad8\u6548\u5730\u66f4\u65b0\u6e32\u67d3\u754c\u9762\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u4ee5\u58f0\u660e\u5f0f\u7f16\u5199UI\uff0c\u53ef\u4ee5\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u52a0\u53ef\u9760\uff0c\u4e14\u65b9\u4fbf\u8c03\u8bd5\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u521b\u5efa\u597d\u62e5\u6709\u5404\u81ea\u72b6\u6001\u7684\u7ec4\u4ef6\uff0c\u518d\u7531\u7ec4\u4ef6\u6784\u6210\u66f4\u52a0\u590d\u6742\u7684\u754c\u9762\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u65e0\u9700\u518d\u7528\u6a21\u7248\u4ee3\u7801\uff0c\u901a\u8fc7\u4f7f\u7528JavaScript\u7f16\u5199\u7684\u7ec4\u4ef6\u4f60\u53ef\u4ee5\u66f4\u597d\u5730\u4f20\u9012\u6570\u636e\uff0c\u5c06\u5e94\u7528\u72b6\u6001\u548cDOM\u62c6\u5206\u5f00\u6765\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u65e0\u8bba\u4f60\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u4ec0\u4e48\u6280\u672f\u6808\uff0c\u4f60\u90fd\u53ef\u4ee5\u968f\u65f6\u5f15\u5165 React \u5f00\u53d1\u65b0\u7279\u6027\u3002",r.default.createElement("br",null),r.default.createElement("br",null),r.default.createElement("b",null,"\u7ec4\u4ef6"),r.default.createElement("br",null),r.default.createElement("br",null),"React \u7ec4\u4ef6\u4f7f\u7528\u4e00\u4e2a\u540d\u4e3a render() \u7684\u65b9\u6cd5\uff0c \u63a5\u6536\u6570\u636e\u4f5c\u4e3a\u8f93\u5165\uff0c\u8f93\u51fa\u9875\u9762\u4e2d\u5bf9\u5e94\u5c55\u793a\u7684\u5185\u5bb9\u3002 \u4e0b\u9762\u8fd9\u4e2a\u793a\u4f8b\u4e2d\u7c7b\u4f3cXML\u7684\u5199\u6cd5\u88ab\u79f0\u4e3aJSX. \u8f93\u5165\u7684\u6570\u636e\u901a\u8fc7 this.props \u4f20\u5165 render() \u65b9\u6cd5\u3002"),r.default.createElement(u.ButtonGroup,null,r.default.createElement(u.Button,{onClick:this.onClick.bind(this)},"\u6253\u5f00\u62bd\u5c49")))}}])&&i(t.prototype,n),l&&i(t,l),Object.defineProperty(t,"prototype",{writable:!1}),f}(r.default.Component)}(),71:function(){function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}var t,r=(t=n(8573))&&t.__esModule?t:{default:t},u=n(7937);function o(e,t){if(n=e,!(null!=(r=t)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](n):n instanceof r))throw new TypeError("Cannot call a class as a function");var n,r}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,l(r.key),r)}}function l(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var u=r.call(t,n||"default");if("object"!==e(u))return u;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}function a(e,t){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},a(e,t)}function s(t){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,u=c(t);if(n){var o=c(this).constructor;r=Reflect.construct(u,arguments,o)}else r=u.apply(this,arguments);return function(t,n){if(n&&("object"===e(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(this,r)}}function c(e){return c=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},c(e)}return function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&a(e,t)}(f,e);var t,n,l,c=s(f);function f(){var e;return o(this,f),(e=c.call(this)).state={visible:!1,placement:null},e}return t=f,(n=[{key:"onClick",value:function(e){this.setState({visible:!this.state.visible,placement:e})}},{key:"onClose",value:function(){this.setState({visible:!1})}},{key:"render",value:function(){return r.default.createElement("div",null,r.default.createElement(u.Drawer,{title:"\u62bd\u5c49\u6807\u9898",icon:"information",placement:this.state.placement,isOpen:this.state.visible,footer:"\u9875\u811a\uff0c\u53ef\u4ee5\u653e\u70b9\u5185\u5bb9",onClose:this.onClose.bind(this)},"React \u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u754c\u9762\u3002\u4e3a\u4f60\u5e94\u7528\u7684\u6bcf\u4e00\u4e2a\u72b6\u6001\u8bbe\u8ba1\u7b80\u6d01\u7684\u89c6\u56fe\uff0c\u5728\u6570\u636e\u6539\u53d8\u65f6 React \u4e5f\u53ef\u4ee5\u9ad8\u6548\u5730\u66f4\u65b0\u6e32\u67d3\u754c\u9762\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u4ee5\u58f0\u660e\u5f0f\u7f16\u5199UI\uff0c\u53ef\u4ee5\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u52a0\u53ef\u9760\uff0c\u4e14\u65b9\u4fbf\u8c03\u8bd5\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u521b\u5efa\u597d\u62e5\u6709\u5404\u81ea\u72b6\u6001\u7684\u7ec4\u4ef6\uff0c\u518d\u7531\u7ec4\u4ef6\u6784\u6210\u66f4\u52a0\u590d\u6742\u7684\u754c\u9762\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u65e0\u9700\u518d\u7528\u6a21\u7248\u4ee3\u7801\uff0c\u901a\u8fc7\u4f7f\u7528JavaScript\u7f16\u5199\u7684\u7ec4\u4ef6\u4f60\u53ef\u4ee5\u66f4\u597d\u5730\u4f20\u9012\u6570\u636e\uff0c\u5c06\u5e94\u7528\u72b6\u6001\u548cDOM\u62c6\u5206\u5f00\u6765\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u65e0\u8bba\u4f60\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u4ec0\u4e48\u6280\u672f\u6808\uff0c\u4f60\u90fd\u53ef\u4ee5\u968f\u65f6\u5f15\u5165 React \u5f00\u53d1\u65b0\u7279\u6027\u3002",r.default.createElement("br",null),r.default.createElement("br",null),r.default.createElement("b",null,"\u7ec4\u4ef6"),"'top', 'right', 'bottom', 'left'"),r.default.createElement(u.ButtonGroup,null,r.default.createElement(u.Button,{onClick:this.onClick.bind(this,"left")},"Left"),r.default.createElement(u.Button,{onClick:this.onClick.bind(this,"top")},"Top"),r.default.createElement(u.Button,{onClick:this.onClick.bind(this,"bottom")},"Bottom"),r.default.createElement(u.Button,{onClick:this.onClick.bind(this,"right")},"Right")))}}])&&i(t.prototype,n),l&&i(t,l),Object.defineProperty(t,"prototype",{writable:!1}),f}(r.default.Component)}(),129:function(){function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}var t,r=(t=n(8573))&&t.__esModule?t:{default:t},u=n(7937);function o(e,t){if(n=e,!(null!=(r=t)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](n):n instanceof r))throw new TypeError("Cannot call a class as a function");var n,r}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,l(r.key),r)}}function l(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var u=r.call(t,n||"default");if("object"!==e(u))return u;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}function a(e,t){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},a(e,t)}function s(t){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,u=c(t);if(n){var o=c(this).constructor;r=Reflect.construct(u,arguments,o)}else r=u.apply(this,arguments);return function(t,n){if(n&&("object"===e(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(this,r)}}function c(e){return c=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},c(e)}return function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&a(e,t)}(f,e);var t,n,l,c=s(f);function f(){var e;return o(this,f),(e=c.call(this)).state={visible:!1},e}return t=f,(n=[{key:"onClick",value:function(){this.setState({visible:!this.state.visible})}},{key:"onClose",value:function(){this.setState({visible:!1})}},{key:"render",value:function(){return r.default.createElement("div",null,r.default.createElement(u.Drawer,{title:"\u62bd\u5c49\u6807\u9898",isOpen:this.state.visible,onClose:this.onClose.bind(this),footer:r.default.createElement("div",null,r.default.createElement(u.Button,{size:"small",type:"danger",onClick:this.onClick.bind(this)},"\u5173\u95ed\u62bd\u5c49"),r.default.createElement(u.Button,{size:"small",type:"success"},"\u5176\u5b83"))},"React \u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u754c\u9762\u3002\u4e3a\u4f60\u5e94\u7528\u7684\u6bcf\u4e00\u4e2a\u72b6\u6001\u8bbe\u8ba1\u7b80\u6d01\u7684\u89c6\u56fe\uff0c\u5728\u6570\u636e\u6539\u53d8\u65f6 React \u4e5f\u53ef\u4ee5\u9ad8\u6548\u5730\u66f4\u65b0\u6e32\u67d3\u754c\u9762\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u4ee5\u58f0\u660e\u5f0f\u7f16\u5199UI\uff0c\u53ef\u4ee5\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u52a0\u53ef\u9760\uff0c\u4e14\u65b9\u4fbf\u8c03\u8bd5\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u521b\u5efa\u597d\u62e5\u6709\u5404\u81ea\u72b6\u6001\u7684\u7ec4\u4ef6\uff0c\u518d\u7531\u7ec4\u4ef6\u6784\u6210\u66f4\u52a0\u590d\u6742\u7684\u754c\u9762\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u65e0\u9700\u518d\u7528\u6a21\u7248\u4ee3\u7801\uff0c\u901a\u8fc7\u4f7f\u7528JavaScript\u7f16\u5199\u7684\u7ec4\u4ef6\u4f60\u53ef\u4ee5\u66f4\u597d\u5730\u4f20\u9012\u6570\u636e\uff0c\u5c06\u5e94\u7528\u72b6\u6001\u548cDOM\u62c6\u5206\u5f00\u6765\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u65e0\u8bba\u4f60\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u4ec0\u4e48\u6280\u672f\u6808\uff0c\u4f60\u90fd\u53ef\u4ee5\u968f\u65f6\u5f15\u5165 React \u5f00\u53d1\u65b0\u7279\u6027\u3002",r.default.createElement("br",null),r.default.createElement("br",null),r.default.createElement("b",null,"\u7ec4\u4ef6"),r.default.createElement("br",null),r.default.createElement("br",null),"React \u7ec4\u4ef6\u4f7f\u7528\u4e00\u4e2a\u540d\u4e3a render() \u7684\u65b9\u6cd5\uff0c \u63a5\u6536\u6570\u636e\u4f5c\u4e3a\u8f93\u5165\uff0c\u8f93\u51fa\u9875\u9762\u4e2d\u5bf9\u5e94\u5c55\u793a\u7684\u5185\u5bb9\u3002 \u4e0b\u9762\u8fd9\u4e2a\u793a\u4f8b\u4e2d\u7c7b\u4f3cXML\u7684\u5199\u6cd5\u88ab\u79f0\u4e3aJSX. \u8f93\u5165\u7684\u6570\u636e\u901a\u8fc7 this.props \u4f20\u5165 render() \u65b9\u6cd5\u3002"),r.default.createElement(u.ButtonGroup,null,r.default.createElement(u.Button,{onClick:this.onClick.bind(this)},"\u6253\u5f00\u62bd\u5c49")))}}])&&i(t.prototype,n),l&&i(t,l),Object.defineProperty(t,"prototype",{writable:!1}),f}(r.default.Component)}()},data:{19:{name:19,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nvar Demo = /*#__PURE__*/function (_React$Component) {\n _inherits(Demo, _React$Component);\n var _super = _createSuper(Demo);\n function Demo() {\n var _this;\n _classCallCheck(this, Demo);\n _this = _super.call(this);\n _this.state = {\n visible: false\n };\n return _this;\n }\n _createClass(Demo, [{\n key: "onClick",\n value: function onClick() {\n this.setState({\n visible: !this.state.visible\n });\n }\n }, {\n key: "onClose",\n value: function onClose() {\n this.setState({\n visible: false\n });\n }\n }, {\n key: "render",\n value: function render() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Drawer, {\n title: "\\u62BD\\u5C49\\u6807\\u9898",\n isOpen: this.state.visible,\n onClose: this.onClose.bind(this)\n }, "React \\u53EF\\u4EE5\\u975E\\u5E38\\u8F7B\\u677E\\u5730\\u521B\\u5EFA\\u7528\\u6237\\u4EA4\\u4E92\\u754C\\u9762\\u3002\\u4E3A\\u4F60\\u5E94\\u7528\\u7684\\u6BCF\\u4E00\\u4E2A\\u72B6\\u6001\\u8BBE\\u8BA1\\u7B80\\u6D01\\u7684\\u89C6\\u56FE\\uFF0C\\u5728\\u6570\\u636E\\u6539\\u53D8\\u65F6 React \\u4E5F\\u53EF\\u4EE5\\u9AD8\\u6548\\u5730\\u66F4\\u65B0\\u6E32\\u67D3\\u754C\\u9762\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u4EE5\\u58F0\\u660E\\u5F0F\\u7F16\\u5199UI\\uFF0C\\u53EF\\u4EE5\\u8BA9\\u4F60\\u7684\\u4EE3\\u7801\\u66F4\\u52A0\\u53EF\\u9760\\uFF0C\\u4E14\\u65B9\\u4FBF\\u8C03\\u8BD5\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u521B\\u5EFA\\u597D\\u62E5\\u6709\\u5404\\u81EA\\u72B6\\u6001\\u7684\\u7EC4\\u4EF6\\uFF0C\\u518D\\u7531\\u7EC4\\u4EF6\\u6784\\u6210\\u66F4\\u52A0\\u590D\\u6742\\u7684\\u754C\\u9762\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u65E0\\u9700\\u518D\\u7528\\u6A21\\u7248\\u4EE3\\u7801\\uFF0C\\u901A\\u8FC7\\u4F7F\\u7528JavaScript\\u7F16\\u5199\\u7684\\u7EC4\\u4EF6\\u4F60\\u53EF\\u4EE5\\u66F4\\u597D\\u5730\\u4F20\\u9012\\u6570\\u636E\\uFF0C\\u5C06\\u5E94\\u7528\\u72B6\\u6001\\u548CDOM\\u62C6\\u5206\\u5F00\\u6765\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u65E0\\u8BBA\\u4F60\\u73B0\\u5728\\u6B63\\u5728\\u4F7F\\u7528\\u4EC0\\u4E48\\u6280\\u672F\\u6808\\uFF0C\\u4F60\\u90FD\\u53EF\\u4EE5\\u968F\\u65F6\\u5F15\\u5165 React \\u5F00\\u53D1\\u65B0\\u7279\\u6027\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("b", null, "\\u7EC4\\u4EF6"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "React \\u7EC4\\u4EF6\\u4F7F\\u7528\\u4E00\\u4E2A\\u540D\\u4E3A render() \\u7684\\u65B9\\u6CD5\\uFF0C \\u63A5\\u6536\\u6570\\u636E\\u4F5C\\u4E3A\\u8F93\\u5165\\uFF0C\\u8F93\\u51FA\\u9875\\u9762\\u4E2D\\u5BF9\\u5E94\\u5C55\\u793A\\u7684\\u5185\\u5BB9\\u3002 \\u4E0B\\u9762\\u8FD9\\u4E2A\\u793A\\u4F8B\\u4E2D\\u7C7B\\u4F3CXML\\u7684\\u5199\\u6CD5\\u88AB\\u79F0\\u4E3AJSX. \\u8F93\\u5165\\u7684\\u6570\\u636E\\u901A\\u8FC7 this.props \\u4F20\\u5165 render() \\u65B9\\u6CD5\\u3002"), /*#__PURE__*/_react["default"].createElement(_uiw.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n onClick: this.onClick.bind(this)\n }, "\\u6253\\u5F00\\u62BD\\u5C49")));\n }\n }]);\n return Demo;\n}(_react["default"].Component);\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Drawer, ButtonGroup, Button } from 'uiw';\n\nclass Demo extends React.Component {\n constructor() {\n super();\n this.state = {\n visible: false,\n }\n }\n onClick() {\n this.setState({ visible: !this.state.visible });\n }\n onClose() {\n this.setState({ visible: false });\n }\n render() {\n return (\n <div>\n <Drawer\n title=\"\u62bd\u5c49\u6807\u9898\"\n isOpen={this.state.visible}\n onClose={this.onClose.bind(this)}\n >\n React \u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u754c\u9762\u3002\u4e3a\u4f60\u5e94\u7528\u7684\u6bcf\u4e00\u4e2a\u72b6\u6001\u8bbe\u8ba1\u7b80\u6d01\u7684\u89c6\u56fe\uff0c\u5728\u6570\u636e\u6539\u53d8\u65f6 React \u4e5f\u53ef\u4ee5\u9ad8\u6548\u5730\u66f4\u65b0\u6e32\u67d3\u754c\u9762\u3002\n <br /><br />\n \u4ee5\u58f0\u660e\u5f0f\u7f16\u5199UI\uff0c\u53ef\u4ee5\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u52a0\u53ef\u9760\uff0c\u4e14\u65b9\u4fbf\u8c03\u8bd5\u3002\n <br /><br />\n \u521b\u5efa\u597d\u62e5\u6709\u5404\u81ea\u72b6\u6001\u7684\u7ec4\u4ef6\uff0c\u518d\u7531\u7ec4\u4ef6\u6784\u6210\u66f4\u52a0\u590d\u6742\u7684\u754c\u9762\u3002\n <br /><br />\n \u65e0\u9700\u518d\u7528\u6a21\u7248\u4ee3\u7801\uff0c\u901a\u8fc7\u4f7f\u7528JavaScript\u7f16\u5199\u7684\u7ec4\u4ef6\u4f60\u53ef\u4ee5\u66f4\u597d\u5730\u4f20\u9012\u6570\u636e\uff0c\u5c06\u5e94\u7528\u72b6\u6001\u548cDOM\u62c6\u5206\u5f00\u6765\u3002\n <br /><br />\n \u65e0\u8bba\u4f60\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u4ec0\u4e48\u6280\u672f\u6808\uff0c\u4f60\u90fd\u53ef\u4ee5\u968f\u65f6\u5f15\u5165 React \u5f00\u53d1\u65b0\u7279\u6027\u3002\n <br /><br />\n <b>\u7ec4\u4ef6</b>\n <br /><br />\n React \u7ec4\u4ef6\u4f7f\u7528\u4e00\u4e2a\u540d\u4e3a render() \u7684\u65b9\u6cd5\uff0c \u63a5\u6536\u6570\u636e\u4f5c\u4e3a\u8f93\u5165\uff0c\u8f93\u51fa\u9875\u9762\u4e2d\u5bf9\u5e94\u5c55\u793a\u7684\u5185\u5bb9\u3002 \u4e0b\u9762\u8fd9\u4e2a\u793a\u4f8b\u4e2d\u7c7b\u4f3cXML\u7684\u5199\u6cd5\u88ab\u79f0\u4e3aJSX. \u8f93\u5165\u7684\u6570\u636e\u901a\u8fc7 this.props \u4f20\u5165 render() \u65b9\u6cd5\u3002\n </Drawer>\n <ButtonGroup>\n <Button onClick={this.onClick.bind(this)}>\u6253\u5f00\u62bd\u5c49</Button>\n </ButtonGroup>\n </div>\n )\n }\n}\n\nexport default Demo;"},71:{name:71,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nvar Demo = /*#__PURE__*/function (_React$Component) {\n _inherits(Demo, _React$Component);\n var _super = _createSuper(Demo);\n function Demo() {\n var _this;\n _classCallCheck(this, Demo);\n _this = _super.call(this);\n _this.state = {\n visible: false,\n placement: null\n };\n return _this;\n }\n _createClass(Demo, [{\n key: "onClick",\n value: function onClick(placement) {\n this.setState({\n visible: !this.state.visible,\n placement: placement\n });\n }\n }, {\n key: "onClose",\n value: function onClose() {\n this.setState({\n visible: false\n });\n }\n }, {\n key: "render",\n value: function render() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Drawer, {\n title: "\\u62BD\\u5C49\\u6807\\u9898",\n icon: "information",\n placement: this.state.placement,\n isOpen: this.state.visible,\n footer: "\\u9875\\u811A\\uFF0C\\u53EF\\u4EE5\\u653E\\u70B9\\u5185\\u5BB9",\n onClose: this.onClose.bind(this)\n }, "React \\u53EF\\u4EE5\\u975E\\u5E38\\u8F7B\\u677E\\u5730\\u521B\\u5EFA\\u7528\\u6237\\u4EA4\\u4E92\\u754C\\u9762\\u3002\\u4E3A\\u4F60\\u5E94\\u7528\\u7684\\u6BCF\\u4E00\\u4E2A\\u72B6\\u6001\\u8BBE\\u8BA1\\u7B80\\u6D01\\u7684\\u89C6\\u56FE\\uFF0C\\u5728\\u6570\\u636E\\u6539\\u53D8\\u65F6 React \\u4E5F\\u53EF\\u4EE5\\u9AD8\\u6548\\u5730\\u66F4\\u65B0\\u6E32\\u67D3\\u754C\\u9762\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u4EE5\\u58F0\\u660E\\u5F0F\\u7F16\\u5199UI\\uFF0C\\u53EF\\u4EE5\\u8BA9\\u4F60\\u7684\\u4EE3\\u7801\\u66F4\\u52A0\\u53EF\\u9760\\uFF0C\\u4E14\\u65B9\\u4FBF\\u8C03\\u8BD5\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u521B\\u5EFA\\u597D\\u62E5\\u6709\\u5404\\u81EA\\u72B6\\u6001\\u7684\\u7EC4\\u4EF6\\uFF0C\\u518D\\u7531\\u7EC4\\u4EF6\\u6784\\u6210\\u66F4\\u52A0\\u590D\\u6742\\u7684\\u754C\\u9762\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u65E0\\u9700\\u518D\\u7528\\u6A21\\u7248\\u4EE3\\u7801\\uFF0C\\u901A\\u8FC7\\u4F7F\\u7528JavaScript\\u7F16\\u5199\\u7684\\u7EC4\\u4EF6\\u4F60\\u53EF\\u4EE5\\u66F4\\u597D\\u5730\\u4F20\\u9012\\u6570\\u636E\\uFF0C\\u5C06\\u5E94\\u7528\\u72B6\\u6001\\u548CDOM\\u62C6\\u5206\\u5F00\\u6765\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u65E0\\u8BBA\\u4F60\\u73B0\\u5728\\u6B63\\u5728\\u4F7F\\u7528\\u4EC0\\u4E48\\u6280\\u672F\\u6808\\uFF0C\\u4F60\\u90FD\\u53EF\\u4EE5\\u968F\\u65F6\\u5F15\\u5165 React \\u5F00\\u53D1\\u65B0\\u7279\\u6027\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("b", null, "\\u7EC4\\u4EF6"), "\'top\', \'right\', \'bottom\', \'left\'"), /*#__PURE__*/_react["default"].createElement(_uiw.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n onClick: this.onClick.bind(this, \'left\')\n }, "Left"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n onClick: this.onClick.bind(this, \'top\')\n }, "Top"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n onClick: this.onClick.bind(this, \'bottom\')\n }, "Bottom"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n onClick: this.onClick.bind(this, \'right\')\n }, "Right")));\n }\n }]);\n return Demo;\n}(_react["default"].Component);\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Drawer, ButtonGroup, Button } from 'uiw';\n\nclass Demo extends React.Component {\n constructor() {\n super();\n this.state = {\n visible: false,\n placement: null,\n }\n }\n onClick(placement) {\n this.setState({ visible: !this.state.visible, placement });\n }\n onClose() {\n this.setState({ visible: false });\n }\n render() {\n return (\n <div>\n <Drawer\n title=\"\u62bd\u5c49\u6807\u9898\"\n icon=\"information\"\n placement={this.state.placement}\n isOpen={this.state.visible}\n footer=\"\u9875\u811a\uff0c\u53ef\u4ee5\u653e\u70b9\u5185\u5bb9\"\n onClose={this.onClose.bind(this)}\n >\n React \u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u754c\u9762\u3002\u4e3a\u4f60\u5e94\u7528\u7684\u6bcf\u4e00\u4e2a\u72b6\u6001\u8bbe\u8ba1\u7b80\u6d01\u7684\u89c6\u56fe\uff0c\u5728\u6570\u636e\u6539\u53d8\u65f6 React \u4e5f\u53ef\u4ee5\u9ad8\u6548\u5730\u66f4\u65b0\u6e32\u67d3\u754c\u9762\u3002\n <br /><br />\n \u4ee5\u58f0\u660e\u5f0f\u7f16\u5199UI\uff0c\u53ef\u4ee5\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u52a0\u53ef\u9760\uff0c\u4e14\u65b9\u4fbf\u8c03\u8bd5\u3002\n <br /><br />\n \u521b\u5efa\u597d\u62e5\u6709\u5404\u81ea\u72b6\u6001\u7684\u7ec4\u4ef6\uff0c\u518d\u7531\u7ec4\u4ef6\u6784\u6210\u66f4\u52a0\u590d\u6742\u7684\u754c\u9762\u3002\n <br /><br />\n \u65e0\u9700\u518d\u7528\u6a21\u7248\u4ee3\u7801\uff0c\u901a\u8fc7\u4f7f\u7528JavaScript\u7f16\u5199\u7684\u7ec4\u4ef6\u4f60\u53ef\u4ee5\u66f4\u597d\u5730\u4f20\u9012\u6570\u636e\uff0c\u5c06\u5e94\u7528\u72b6\u6001\u548cDOM\u62c6\u5206\u5f00\u6765\u3002\n <br /><br />\n \u65e0\u8bba\u4f60\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u4ec0\u4e48\u6280\u672f\u6808\uff0c\u4f60\u90fd\u53ef\u4ee5\u968f\u65f6\u5f15\u5165 React \u5f00\u53d1\u65b0\u7279\u6027\u3002\n <br /><br />\n <b>\u7ec4\u4ef6</b>'top', 'right', 'bottom', 'left'\n </Drawer>\n <ButtonGroup>\n <Button onClick={this.onClick.bind(this, 'left')}>Left</Button>\n <Button onClick={this.onClick.bind(this, 'top')}>Top</Button>\n <Button onClick={this.onClick.bind(this, 'bottom')}>Bottom</Button>\n <Button onClick={this.onClick.bind(this, 'right')}>Right</Button>\n </ButtonGroup>\n </div>\n )\n }\n}\n\nexport default Demo;"},129:{name:129,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nvar Demo = /*#__PURE__*/function (_React$Component) {\n _inherits(Demo, _React$Component);\n var _super = _createSuper(Demo);\n function Demo() {\n var _this;\n _classCallCheck(this, Demo);\n _this = _super.call(this);\n _this.state = {\n visible: false\n };\n return _this;\n }\n _createClass(Demo, [{\n key: "onClick",\n value: function onClick() {\n this.setState({\n visible: !this.state.visible\n });\n }\n }, {\n key: "onClose",\n value: function onClose() {\n this.setState({\n visible: false\n });\n }\n }, {\n key: "render",\n value: function render() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Drawer, {\n title: "\\u62BD\\u5C49\\u6807\\u9898",\n isOpen: this.state.visible,\n onClose: this.onClose.bind(this),\n footer: /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n size: "small",\n type: "danger",\n onClick: this.onClick.bind(this)\n }, "\\u5173\\u95ED\\u62BD\\u5C49"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n size: "small",\n type: "success"\n }, "\\u5176\\u5B83"))\n }, "React \\u53EF\\u4EE5\\u975E\\u5E38\\u8F7B\\u677E\\u5730\\u521B\\u5EFA\\u7528\\u6237\\u4EA4\\u4E92\\u754C\\u9762\\u3002\\u4E3A\\u4F60\\u5E94\\u7528\\u7684\\u6BCF\\u4E00\\u4E2A\\u72B6\\u6001\\u8BBE\\u8BA1\\u7B80\\u6D01\\u7684\\u89C6\\u56FE\\uFF0C\\u5728\\u6570\\u636E\\u6539\\u53D8\\u65F6 React \\u4E5F\\u53EF\\u4EE5\\u9AD8\\u6548\\u5730\\u66F4\\u65B0\\u6E32\\u67D3\\u754C\\u9762\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u4EE5\\u58F0\\u660E\\u5F0F\\u7F16\\u5199UI\\uFF0C\\u53EF\\u4EE5\\u8BA9\\u4F60\\u7684\\u4EE3\\u7801\\u66F4\\u52A0\\u53EF\\u9760\\uFF0C\\u4E14\\u65B9\\u4FBF\\u8C03\\u8BD5\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u521B\\u5EFA\\u597D\\u62E5\\u6709\\u5404\\u81EA\\u72B6\\u6001\\u7684\\u7EC4\\u4EF6\\uFF0C\\u518D\\u7531\\u7EC4\\u4EF6\\u6784\\u6210\\u66F4\\u52A0\\u590D\\u6742\\u7684\\u754C\\u9762\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u65E0\\u9700\\u518D\\u7528\\u6A21\\u7248\\u4EE3\\u7801\\uFF0C\\u901A\\u8FC7\\u4F7F\\u7528JavaScript\\u7F16\\u5199\\u7684\\u7EC4\\u4EF6\\u4F60\\u53EF\\u4EE5\\u66F4\\u597D\\u5730\\u4F20\\u9012\\u6570\\u636E\\uFF0C\\u5C06\\u5E94\\u7528\\u72B6\\u6001\\u548CDOM\\u62C6\\u5206\\u5F00\\u6765\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u65E0\\u8BBA\\u4F60\\u73B0\\u5728\\u6B63\\u5728\\u4F7F\\u7528\\u4EC0\\u4E48\\u6280\\u672F\\u6808\\uFF0C\\u4F60\\u90FD\\u53EF\\u4EE5\\u968F\\u65F6\\u5F15\\u5165 React \\u5F00\\u53D1\\u65B0\\u7279\\u6027\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("b", null, "\\u7EC4\\u4EF6"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "React \\u7EC4\\u4EF6\\u4F7F\\u7528\\u4E00\\u4E2A\\u540D\\u4E3A render() \\u7684\\u65B9\\u6CD5\\uFF0C \\u63A5\\u6536\\u6570\\u636E\\u4F5C\\u4E3A\\u8F93\\u5165\\uFF0C\\u8F93\\u51FA\\u9875\\u9762\\u4E2D\\u5BF9\\u5E94\\u5C55\\u793A\\u7684\\u5185\\u5BB9\\u3002 \\u4E0B\\u9762\\u8FD9\\u4E2A\\u793A\\u4F8B\\u4E2D\\u7C7B\\u4F3CXML\\u7684\\u5199\\u6CD5\\u88AB\\u79F0\\u4E3AJSX. \\u8F93\\u5165\\u7684\\u6570\\u636E\\u901A\\u8FC7 this.props \\u4F20\\u5165 render() \\u65B9\\u6CD5\\u3002"), /*#__PURE__*/_react["default"].createElement(_uiw.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n onClick: this.onClick.bind(this)\n }, "\\u6253\\u5F00\\u62BD\\u5C49")));\n }\n }]);\n return Demo;\n}(_react["default"].Component);\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Drawer, ButtonGroup, Button } from \'uiw\';\n\nclass Demo extends React.Component {\n constructor() {\n super();\n this.state = {\n visible: false,\n }\n }\n onClick() {\n this.setState({ visible: !this.state.visible });\n }\n onClose() {\n this.setState({ visible: false });\n }\n render() {\n return (\n <div>\n <Drawer\n title="\u62bd\u5c49\u6807\u9898"\n isOpen={this.state.visible}\n onClose={this.onClose.bind(this)}\n footer={\n <div>\n <Button size="small" type="danger" onClick={this.onClick.bind(this)}>\u5173\u95ed\u62bd\u5c49</Button>\n <Button size="small" type="success">\u5176\u5b83</Button>\n </div>\n }\n >\n React \u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u754c\u9762\u3002\u4e3a\u4f60\u5e94\u7528\u7684\u6bcf\u4e00\u4e2a\u72b6\u6001\u8bbe\u8ba1\u7b80\u6d01\u7684\u89c6\u56fe\uff0c\u5728\u6570\u636e\u6539\u53d8\u65f6 React \u4e5f\u53ef\u4ee5\u9ad8\u6548\u5730\u66f4\u65b0\u6e32\u67d3\u754c\u9762\u3002\n <br /><br />\n \u4ee5\u58f0\u660e\u5f0f\u7f16\u5199UI\uff0c\u53ef\u4ee5\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u52a0\u53ef\u9760\uff0c\u4e14\u65b9\u4fbf\u8c03\u8bd5\u3002\n <br /><br />\n \u521b\u5efa\u597d\u62e5\u6709\u5404\u81ea\u72b6\u6001\u7684\u7ec4\u4ef6\uff0c\u518d\u7531\u7ec4\u4ef6\u6784\u6210\u66f4\u52a0\u590d\u6742\u7684\u754c\u9762\u3002\n <br /><br />\n \u65e0\u9700\u518d\u7528\u6a21\u7248\u4ee3\u7801\uff0c\u901a\u8fc7\u4f7f\u7528JavaScript\u7f16\u5199\u7684\u7ec4\u4ef6\u4f60\u53ef\u4ee5\u66f4\u597d\u5730\u4f20\u9012\u6570\u636e\uff0c\u5c06\u5e94\u7528\u72b6\u6001\u548cDOM\u62c6\u5206\u5f00\u6765\u3002\n <br /><br />\n \u65e0\u8bba\u4f60\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u4ec0\u4e48\u6280\u672f\u6808\uff0c\u4f60\u90fd\u53ef\u4ee5\u968f\u65f6\u5f15\u5165 React \u5f00\u53d1\u65b0\u7279\u6027\u3002\n <br /><br />\n <b>\u7ec4\u4ef6</b>\n <br /><br />\n React \u7ec4\u4ef6\u4f7f\u7528\u4e00\u4e2a\u540d\u4e3a render() \u7684\u65b9\u6cd5\uff0c \u63a5\u6536\u6570\u636e\u4f5c\u4e3a\u8f93\u5165\uff0c\u8f93\u51fa\u9875\u9762\u4e2d\u5bf9\u5e94\u5c55\u793a\u7684\u5185\u5bb9\u3002 \u4e0b\u9762\u8fd9\u4e2a\u793a\u4f8b\u4e2d\u7c7b\u4f3cXML\u7684\u5199\u6cd5\u88ab\u79f0\u4e3aJSX. \u8f93\u5165\u7684\u6570\u636e\u901a\u8fc7 this.props \u4f20\u5165 render() \u65b9\u6cd5\u3002\n </Drawer>\n <ButtonGroup>\n <Button onClick={this.onClick.bind(this)}>\u6253\u5f00\u62bd\u5c49</Button>\n </ButtonGroup>\n </div>\n )\n }\n}\n\nexport default Demo;'}},source:"Drawer \u62bd\u5c49\n===\n\n[![Buy me a coffee](https://img.shields.io/bad