@uiw/doc
Version:
UIW documentation website.
1 lines • 53.5 kB
JavaScript
(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7604],{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:()=>m});var r=n(8573),a=n(6320),o=n(8563),i=n(7622),u=n(7937);const l={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:l.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)(u.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)(u.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,s.jsx)(u.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,s.jsx)(u.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)(u.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const p=a.ZP.Preview,f=a.ZP.Code,y=a.ZP.Toolbar,d=e=>{var t,n;let{node:i,components:u,data:l,...c}=e;const d=(0,r.useRef)(null),{headings:m,headingsList:_,...v}=c;(0,r.useEffect)((()=>{if(d.current){const e=d.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(d.current,e)}}),[d]);const b=null===i||void 0===i||null===(t=i.position)||void 0===t?void 0:t.start.line,g=null===i||void 0===i||null===(n=i.data)||void 0===n?void 0:n.meta,h=(0,o.Mx)(g)||String(b),O=u["".concat(h)];if(h&&"function"===typeof O){const e=l[h].value||"",t=(0,o.aE)(g||"");return(0,s.jsxs)(a.ZP,{ref:d,children:[(0,s.jsx)(p,{style:{background:t.bg||"transparent"},children:(0,s.jsx)(O,{})}),(0,s.jsx)(y,{text:e,children:t.title||"Example"}),(0,s.jsx)(f,{children:(0,s.jsx)("pre",{...v})})]})}return(0,s.jsx)("code",{...v})};function m(e){return(0,s.jsxs)(r.Fragment,{children:[(0,s.jsx)(i.Z,{className:l.markdownWrap,source:e.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:t=>(0,s.jsx)(d,{...e,...t})}}),(0,s.jsx)(c,{path:e.path})]})}},350:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>i});const r={components:{19:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,o,i,u=[],l=!0,s=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=o.call(n)).done)&&(u.push(r.value),u.length!==t);l=!0);}catch(e){s=!0,a=e}finally{try{if(!l&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(s)throw a}}return u}}(e,t)||function(e,t){if(!e)return;if("string"===typeof e)return o(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return o(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}return function(){var e=a(t.default.useState(!1),2),n=e[0],o=e[1],i=a(t.default.useState(!0),2),u=i[0],l=i[1];return t.default.createElement("div",null,t.default.createElement(r.Button,{type:"primary",onClick:function(){o(!0),l(!0)}},"\u70b9\u51fb\u5f39\u51fa\u5185\u5bb9"),t.default.createElement(r.Button,{type:"primary",onClick:function(){o(!0),l(!1)}},"\u5f39\u51fa\u5185\u5bb9\u6ca1\u6709\u906e\u7f69\u5c42"),t.default.createElement(r.Overlay,{hasBackdrop:u,isOpen:n,onClose:function(){return o(!1)}},t.default.createElement(r.Card,{active:!0,bordered:!u,style:{width:500}},t.default.createElement("h3",{style:{margin:0}},"\u57fa\u7840\u5f39\u51fa\u5c42 - ",String(n)),t.default.createElement("div",null,"\u8fd9\u662f\u4e00\u4e2a\u57fa\u7840\u7684\u5f39\u51fa\u5c42\u7ec4\u4ef6\uff0c\u5176\u5b83\u5f39\u51fa\u5c42\u7ec4\u4ef6\u57fa\u4e8e\u5b83\u6765\u6269\u5c55\u6bd4\u5982 Modal\u3001Alert"),t.default.createElement("br",null),t.default.createElement(r.Button,{type:"danger",onClick:function(){return o(!1)}},"\u5173\u95ed"))))}}(),67:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,o,i,u=[],l=!0,s=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=o.call(n)).done)&&(u.push(r.value),u.length!==t);l=!0);}catch(e){s=!0,a=e}finally{try{if(!l&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(s)throw a}}return u}}(e,t)||function(e,t){if(!e)return;if("string"===typeof e)return o(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return o(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}return function(){var e=a(t.default.useState(!1),2),n=e[0],o=e[1];return t.default.createElement("div",null,t.default.createElement(r.Button,{type:"primary",onClick:function(){o(!n)}},"\u70b9\u51fb\u5f39\u51fa\u5185\u5bb9"),t.default.createElement(r.Overlay,{backdropProps:{style:{backgroundColor:"rgba(0, 0, 0, .5)"}},isOpen:n,onClose:function(){return o(!1)}},t.default.createElement("div",{style:{backgroundColor:"#fff",minWidth:500}},t.default.createElement(r.Icon,{onClick:function(){return o(!1)},type:"circle-close",style:{position:"absolute",right:0,top:"-20px",color:"#fff",cursor:"pointer"}}),t.default.createElement("div",{style:{backgroundColor:"rgb(0, 204, 180)",color:"rgb(255, 255, 255)",textAlign:"center",padding:"34px 24px"}},t.default.createElement("h1",{style:{fontSize:"28px",fontWeight:"700",color:"rgb(255, 255, 255)",lineHeight:"1.2",margin:"0px"}},"\u4e0b\u6b21\u9884\u8ba2\u53ef\u4eab 5 \uffe5 \u4f18\u60e0"),t.default.createElement("div",{style:{padding:"5px 0"}},"(5 \uffe5 ~ \xa538)"),t.default.createElement("div",{style:{fontSize:"18px"}},"\u4f7f\u7528\u4fc3\u9500\u7801\uff1a ",t.default.createElement("b",{style:{color:"#f8e71c",margin:"0px 4px"}},"KSGI5"))),t.default.createElement("div",{style:{padding:"24px"}},t.default.createElement("h1",{style:{fontSize:"28px",fontWeight:"700",color:"rgb(23, 27, 30)",lineHeight:"1.2",margin:"0px 0px 4px"}},"\u8ba2\u9605 uiw \u7ec4\u4ef6\u65b0\u95fb\u901a\u8baf"),t.default.createElement("div",{style:{color:"rgb(70, 81, 94)"}},"\u5728\u6536\u4ef6\u7bb1\u4e2d\u63a5\u6536\u72ec\u5bb6\u66f4\u65b0\u4fe1\u606f")))))}}(),138: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},a=n(7937);function o(t,n,r){return(n=function(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var a=r.call(t,n||"default");if("object"!==e(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}(n))in t?Object.defineProperty(t,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[n]=r,t}function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,o,i,u=[],l=!0,s=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=o.call(n)).done)&&(u.push(r.value),u.length!==t);l=!0);}catch(e){s=!0,a=e}finally{try{if(!l&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(s)throw a}}return u}}(e,t)||function(e,t){if(!e)return;if("string"===typeof e)return u(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return u(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}return function(){var e=i(r.default.useState(!1),2),t=e[0],n=e[1];function u(e){n(!t)}return r.default.createElement("div",{style:{position:"relative",minHeight:200}},r.default.createElement(a.Button,{type:"primary",onClick:u},"\u70b9\u51fb\u5f39\u51fa\u5185\u5bb9"),r.default.createElement(a.Overlay,{usePortal:!1,isOpen:t,onClose:u},r.default.createElement(a.Card,o({active:!0,style:{width:500}},"active",!0),r.default.createElement("h3",{style:{marginTop:0}},"\u57fa\u7840\u5f39\u51fa\u5c421"),r.default.createElement("p",null,"Portals \u662f react 16 \u63d0\u4f9b\u7684\u5b98\u65b9\u89e3\u51b3\u65b9\u6848\uff0c\u4f7f\u5f97\u7ec4\u4ef6\u53ef\u4ee5\u8131\u79bb\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u5728DOM\u6811\u7684\u4efb\u4f55\u4f4d\u7f6e\uff0c\u6211\u4eec\u5229\u7528\u8fd9\u4e2a\u65b9\u6cd5\uff0c\u53ef\u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u5916\u9762\uff0c\u9ed8\u8ba4\u60c5\u51b5\u751f\u6210\u5230\u8ddf\u8282\u70b9\u7684\u5916\u9762\uff0c\u901a\u8fc7\u5c06 usePortal \u8bbe\u7f6e\u4e3a false \u5c06\u5bf9\u8bdd\u6846\u751f\u6210\u5728\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u7684DOM\u6811\u4e2d\u3002"),r.default.createElement(a.Button,{type:"danger",onClick:u},"\u5173\u95ed"))))}}(),168: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},a=n(7937);function o(t,n,r){return(n=function(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var a=r.call(t,n||"default");if("object"!==e(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}(n))in t?Object.defineProperty(t,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[n]=r,t}function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,o,i,u=[],l=!0,s=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=o.call(n)).done)&&(u.push(r.value),u.length!==t);l=!0);}catch(e){s=!0,a=e}finally{try{if(!l&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(s)throw a}}return u}}(e,t)||function(e,t){if(!e)return;if("string"===typeof e)return u(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return u(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}return function(){var e=i(r.default.useState(!1),2),t=e[0],n=e[1];function u(e){n(!t)}return r.default.createElement("div",null,r.default.createElement(a.Button,{type:"primary",onClick:u},"\u70b9\u51fb\u5f39\u51fa\u5185\u5bb9"),r.default.createElement(a.Overlay,{transitionName:"animation-flipX",timeout:1e3,isOpen:t,onClose:u},r.default.createElement(a.Card,o({active:!0,style:{width:500}},"active",!0),r.default.createElement("h3",{style:{marginTop:0}},"\u57fa\u7840\u5f39\u51fa\u5c42"),r.default.createElement("p",null,"Portals \u662f react 16 \u63d0\u4f9b\u7684\u5b98\u65b9\u89e3\u51b3\u65b9\u6848\uff0c\u4f7f\u5f97\u7ec4\u4ef6\u53ef\u4ee5\u8131\u79bb\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u5728DOM\u6811\u7684\u4efb\u4f55\u4f4d\u7f6e\uff0c\u6211\u4eec\u5229\u7528\u8fd9\u4e2a\u65b9\u6cd5\uff0c\u53ef\u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u5916\u9762\uff0c\u9ed8\u8ba4\u60c5\u51b5\u751f\u6210\u5230\u8ddf\u8282\u70b9\u7684\u5916\u9762\uff0c\u901a\u8fc7\u5c06 usePortal \u8bbe\u7f6e\u4e3a false \u5c06\u5bf9\u8bdd\u6846\u751f\u6210\u5728\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u7684DOM\u6811\u4e2d\u3002"),r.default.createElement(a.Button,{type:"danger",onClick:u},"\u5173\u95ed"))))}}()},data:{19:{name:19,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nreturn function Demo() {\n var _React$useState = _react["default"].useState(false),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n isOpen = _React$useState2[0],\n setIsOpen = _React$useState2[1];\n var _React$useState3 = _react["default"].useState(true),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n hasBackdrop = _React$useState4[0],\n setHasBackdrop = _React$useState4[1];\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "primary",\n onClick: function onClick() {\n setIsOpen(true);\n setHasBackdrop(true);\n }\n }, "\\u70B9\\u51FB\\u5F39\\u51FA\\u5185\\u5BB9"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "primary",\n onClick: function onClick() {\n setIsOpen(true);\n setHasBackdrop(false);\n }\n }, "\\u5F39\\u51FA\\u5185\\u5BB9\\u6CA1\\u6709\\u906E\\u7F69\\u5C42"), /*#__PURE__*/_react["default"].createElement(_uiw.Overlay, {\n hasBackdrop: hasBackdrop,\n isOpen: isOpen,\n onClose: function onClose() {\n return setIsOpen(false);\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Card, {\n active: true,\n bordered: !hasBackdrop,\n style: {\n width: 500\n }\n }, /*#__PURE__*/_react["default"].createElement("h3", {\n style: {\n margin: 0\n }\n }, "\\u57FA\\u7840\\u5F39\\u51FA\\u5C42 - ", String(isOpen)), /*#__PURE__*/_react["default"].createElement("div", null, "\\u8FD9\\u662F\\u4E00\\u4E2A\\u57FA\\u7840\\u7684\\u5F39\\u51FA\\u5C42\\u7EC4\\u4EF6\\uFF0C\\u5176\\u5B83\\u5F39\\u51FA\\u5C42\\u7EC4\\u4EF6\\u57FA\\u4E8E\\u5B83\\u6765\\u6269\\u5C55\\u6BD4\\u5982 Modal\\u3001Alert"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "danger",\n onClick: function onClick() {\n return setIsOpen(false);\n }\n }, "\\u5173\\u95ED"))));\n};',language:"jsx",value:'import React from \'react\';\nimport { Overlay, Button, Card } from \'uiw\';\n\nexport default function Demo() {\n const [isOpen, setIsOpen] = React.useState(false);\n const [hasBackdrop, setHasBackdrop] = React.useState(true);\n return (\n <div>\n <Button\n type="primary"\n onClick={() => {\n setIsOpen(true)\n setHasBackdrop(true)\n }}\n >\n \u70b9\u51fb\u5f39\u51fa\u5185\u5bb9\n </Button>\n <Button\n type="primary"\n onClick={() => {\n setIsOpen(true)\n setHasBackdrop(false)\n }}\n >\n \u5f39\u51fa\u5185\u5bb9\u6ca1\u6709\u906e\u7f69\u5c42\n </Button>\n <Overlay\n hasBackdrop={hasBackdrop}\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\n >\n <Card active bordered={!hasBackdrop} style={{ width: 500 }}>\n <h3 style={{margin: 0}}>\u57fa\u7840\u5f39\u51fa\u5c42 - {String(isOpen)}</h3>\n <div>\n \u8fd9\u662f\u4e00\u4e2a\u57fa\u7840\u7684\u5f39\u51fa\u5c42\u7ec4\u4ef6\uff0c\u5176\u5b83\u5f39\u51fa\u5c42\u7ec4\u4ef6\u57fa\u4e8e\u5b83\u6765\u6269\u5c55\u6bd4\u5982 Modal\u3001Alert\n </div>\n <br />\n <Button type="danger" onClick={() => setIsOpen(false)}>\u5173\u95ed</Button>\n </Card>\n </Overlay>\n </div>\n )\n}'},67:{name:67,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nreturn function Demo() {\n var _React$useState = _react["default"].useState(false),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n isOpen = _React$useState2[0],\n setIsOpen = _React$useState2[1];\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "primary",\n onClick: function onClick() {\n setIsOpen(!isOpen);\n }\n }, "\\u70B9\\u51FB\\u5F39\\u51FA\\u5185\\u5BB9"), /*#__PURE__*/_react["default"].createElement(_uiw.Overlay, {\n backdropProps: {\n style: {\n backgroundColor: \'rgba(0, 0, 0, .5)\'\n }\n },\n isOpen: isOpen,\n onClose: function onClose() {\n return setIsOpen(false);\n }\n }, /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n backgroundColor: \'#fff\',\n minWidth: 500\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n onClick: function onClick() {\n return setIsOpen(false);\n },\n type: "circle-close",\n style: {\n position: \'absolute\',\n right: 0,\n top: \'-20px\',\n color: \'#fff\',\n cursor: \'pointer\'\n }\n }), /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n backgroundColor: \'rgb(0, 204, 180)\',\n color: \'rgb(255, 255, 255)\',\n textAlign: \'center\',\n padding: \'34px 24px\'\n }\n }, /*#__PURE__*/_react["default"].createElement("h1", {\n style: {\n fontSize: \'28px\',\n fontWeight: \'700\',\n color: \'rgb(255, 255, 255)\',\n lineHeight: \'1.2\',\n margin: \'0px\'\n }\n }, "\\u4E0B\\u6B21\\u9884\\u8BA2\\u53EF\\u4EAB 5 \\uFFE5 \\u4F18\\u60E0"), /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n padding: \'5px 0\'\n }\n }, "(5 \\uFFE5 ~ \\xA538)"), /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n fontSize: \'18px\'\n }\n }, "\\u4F7F\\u7528\\u4FC3\\u9500\\u7801\\uFF1A ", /*#__PURE__*/_react["default"].createElement("b", {\n style: {\n color: \'#f8e71c\',\n margin: \'0px 4px\'\n }\n }, "KSGI5"))), /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n padding: \'24px\'\n }\n }, /*#__PURE__*/_react["default"].createElement("h1", {\n style: {\n fontSize: \'28px\',\n fontWeight: \'700\',\n color: \'rgb(23, 27, 30)\',\n lineHeight: \'1.2\',\n margin: \'0px 0px 4px\'\n }\n }, "\\u8BA2\\u9605 uiw \\u7EC4\\u4EF6\\u65B0\\u95FB\\u901A\\u8BAF"), /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n color: \'rgb(70, 81, 94)\'\n }\n }, "\\u5728\\u6536\\u4EF6\\u7BB1\\u4E2D\\u63A5\\u6536\\u72EC\\u5BB6\\u66F4\\u65B0\\u4FE1\\u606F")))));\n};',language:"jsx",value:"import React from 'react';\nimport { Overlay, Button, Icon } from 'uiw';\n\nexport default function Demo() {\n const [isOpen, setIsOpen] = React.useState(false);\n return (\n <div>\n <Button\n type=\"primary\"\n onClick={() => {\n setIsOpen(!isOpen);\n }}\n >\n \u70b9\u51fb\u5f39\u51fa\u5185\u5bb9\n </Button>\n <Overlay\n backdropProps={{\n style: { backgroundColor: 'rgba(0, 0, 0, .5)' }\n }}\n isOpen={isOpen} onClose={() => setIsOpen(false)}\n >\n <div style={{ backgroundColor: '#fff', minWidth: 500 }} >\n <Icon\n onClick={() => setIsOpen(false)}\n type=\"circle-close\"\n style={{\n position: 'absolute',\n right: 0,\n top: '-20px',\n color: '#fff',\n cursor: 'pointer',\n }}\n />\n <div\n style={{\n backgroundColor: 'rgb(0, 204, 180)',\n color: 'rgb(255, 255, 255)',\n textAlign: 'center',\n padding: '34px 24px',\n }}\n >\n <h1\n style={{\n fontSize: '28px',\n fontWeight: '700',\n color: 'rgb(255, 255, 255)',\n lineHeight: '1.2',\n margin: '0px',\n }}\n >\n \u4e0b\u6b21\u9884\u8ba2\u53ef\u4eab 5 \uffe5 \u4f18\u60e0\n </h1>\n <div style={{ padding: '5px 0' }}>(5 \uffe5 ~ \xa538)</div>\n <div style={{ fontSize: '18px' }}>\u4f7f\u7528\u4fc3\u9500\u7801\uff1a <b style={{ color: '#f8e71c', margin: '0px 4px' }}>KSGI5</b></div>\n </div>\n <div style={{ padding: '24px' }}>\n <h1 style={{ fontSize: '28px', fontWeight: '700', color: 'rgb(23, 27, 30)', lineHeight: '1.2', margin: '0px 0px 4px' }}>\u8ba2\u9605 uiw \u7ec4\u4ef6\u65b0\u95fb\u901a\u8baf</h1>\n <div style={{ color: 'rgb(70, 81, 94)' }}>\u5728\u6536\u4ef6\u7bb1\u4e2d\u63a5\u6536\u72ec\u5bb6\u66f4\u65b0\u4fe1\u606f</div>\n </div>\n </div>\n </Overlay>\n </div>\n )\n}"},138:{name:138,meta:{bg:"#fff"},code:'"use strict";\n\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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nreturn function Demo() {\n var _React$useState = _react["default"].useState(false),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n isOpen = _React$useState2[0],\n setIsOpen = _React$useState2[1];\n function toggleOverlay(e) {\n setIsOpen(!isOpen);\n }\n return /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n position: \'relative\',\n minHeight: 200\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "primary",\n onClick: toggleOverlay\n }, "\\u70B9\\u51FB\\u5F39\\u51FA\\u5185\\u5BB9"), /*#__PURE__*/_react["default"].createElement(_uiw.Overlay, {\n usePortal: false,\n isOpen: isOpen,\n onClose: toggleOverlay\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Card, _defineProperty({\n active: true,\n style: {\n width: 500\n }\n }, "active", true), /*#__PURE__*/_react["default"].createElement("h3", {\n style: {\n marginTop: 0\n }\n }, "\\u57FA\\u7840\\u5F39\\u51FA\\u5C421"), /*#__PURE__*/_react["default"].createElement("p", null, "Portals \\u662F react 16 \\u63D0\\u4F9B\\u7684\\u5B98\\u65B9\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u4F7F\\u5F97\\u7EC4\\u4EF6\\u53EF\\u4EE5\\u8131\\u79BB\\u7236\\u7EC4\\u4EF6\\u5C42\\u7EA7\\u6302\\u8F7D\\u5728DOM\\u6811\\u7684\\u4EFB\\u4F55\\u4F4D\\u7F6E\\uFF0C\\u6211\\u4EEC\\u5229\\u7528\\u8FD9\\u4E2A\\u65B9\\u6CD5\\uFF0C\\u53EF\\u5C06\\u6A21\\u6001\\u5BF9\\u8BDD\\u6846\\u751F\\u6210\\u5230\\u6839\\u8282\\u70B9\\u7684\\u5916\\u9762\\uFF0C\\u9ED8\\u8BA4\\u60C5\\u51B5\\u751F\\u6210\\u5230\\u8DDF\\u8282\\u70B9\\u7684\\u5916\\u9762\\uFF0C\\u901A\\u8FC7\\u5C06 usePortal \\u8BBE\\u7F6E\\u4E3A false \\u5C06\\u5BF9\\u8BDD\\u6846\\u751F\\u6210\\u5728\\u7236\\u7EC4\\u4EF6\\u5C42\\u7EA7\\u6302\\u8F7D\\u7684DOM\\u6811\\u4E2D\\u3002"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "danger",\n onClick: toggleOverlay\n }, "\\u5173\\u95ED"))));\n};',language:"jsx",value:"import React from 'react';\nimport { Overlay, Button, Card } from 'uiw';\n\nexport default function Demo() {\n const [isOpen, setIsOpen] = React.useState(false);\n function toggleOverlay(e) {\n setIsOpen(!isOpen);\n }\n return (\n <div style={{ position: 'relative', minHeight: 200 }}>\n <Button type=\"primary\" onClick={toggleOverlay}>\u70b9\u51fb\u5f39\u51fa\u5185\u5bb9</Button>\n <Overlay usePortal={false} isOpen={isOpen} onClose={toggleOverlay}>\n <Card active style={{ width: 500 }} active>\n <h3 style={{marginTop: 0}}>\u57fa\u7840\u5f39\u51fa\u5c421</h3>\n <p>Portals \u662f react 16 \u63d0\u4f9b\u7684\u5b98\u65b9\u89e3\u51b3\u65b9\u6848\uff0c\u4f7f\u5f97\u7ec4\u4ef6\u53ef\u4ee5\u8131\u79bb\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u5728DOM\u6811\u7684\u4efb\u4f55\u4f4d\u7f6e\uff0c\u6211\u4eec\u5229\u7528\u8fd9\u4e2a\u65b9\u6cd5\uff0c\u53ef\u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u5916\u9762\uff0c\u9ed8\u8ba4\u60c5\u51b5\u751f\u6210\u5230\u8ddf\u8282\u70b9\u7684\u5916\u9762\uff0c\u901a\u8fc7\u5c06 usePortal \u8bbe\u7f6e\u4e3a false \u5c06\u5bf9\u8bdd\u6846\u751f\u6210\u5728\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u7684DOM\u6811\u4e2d\u3002</p>\n <Button type=\"danger\" onClick={toggleOverlay}>\u5173\u95ed</Button>\n </Card>\n </Overlay>\n </div>\n )\n}"},168:{name:168,meta:{bg:"#fff"},code:'"use strict";\n\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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nreturn function Demo() {\n var _React$useState = _react["default"].useState(false),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n isOpen = _React$useState2[0],\n setIsOpen = _React$useState2[1];\n function toggleOverlay(e) {\n setIsOpen(!isOpen);\n }\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "primary",\n onClick: toggleOverlay\n }, "\\u70B9\\u51FB\\u5F39\\u51FA\\u5185\\u5BB9"), /*#__PURE__*/_react["default"].createElement(_uiw.Overlay, {\n transitionName: "animation-flipX",\n timeout: 1000,\n isOpen: isOpen,\n onClose: toggleOverlay\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Card, _defineProperty({\n active: true,\n style: {\n width: 500\n }\n }, "active", true), /*#__PURE__*/_react["default"].createElement("h3", {\n style: {\n marginTop: 0\n }\n }, "\\u57FA\\u7840\\u5F39\\u51FA\\u5C42"), /*#__PURE__*/_react["default"].createElement("p", null, "Portals \\u662F react 16 \\u63D0\\u4F9B\\u7684\\u5B98\\u65B9\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u4F7F\\u5F97\\u7EC4\\u4EF6\\u53EF\\u4EE5\\u8131\\u79BB\\u7236\\u7EC4\\u4EF6\\u5C42\\u7EA7\\u6302\\u8F7D\\u5728DOM\\u6811\\u7684\\u4EFB\\u4F55\\u4F4D\\u7F6E\\uFF0C\\u6211\\u4EEC\\u5229\\u7528\\u8FD9\\u4E2A\\u65B9\\u6CD5\\uFF0C\\u53EF\\u5C06\\u6A21\\u6001\\u5BF9\\u8BDD\\u6846\\u751F\\u6210\\u5230\\u6839\\u8282\\u70B9\\u7684\\u5916\\u9762\\uFF0C\\u9ED8\\u8BA4\\u60C5\\u51B5\\u751F\\u6210\\u5230\\u8DDF\\u8282\\u70B9\\u7684\\u5916\\u9762\\uFF0C\\u901A\\u8FC7\\u5C06 usePortal \\u8BBE\\u7F6E\\u4E3A false \\u5C06\\u5BF9\\u8BDD\\u6846\\u751F\\u6210\\u5728\\u7236\\u7EC4\\u4EF6\\u5C42\\u7EA7\\u6302\\u8F7D\\u7684DOM\\u6811\\u4E2D\\u3002"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "danger",\n onClick: toggleOverlay\n }, "\\u5173\\u95ED"))));\n};',language:"jsx",value:'import React from \'react\';\nimport { Overlay, Button, Card } from \'uiw\';\n\nexport default function Demo() {\n const [isOpen, setIsOpen] = React.useState(false);\n function toggleOverlay(e) {\n setIsOpen(!isOpen);\n }\n return (\n <div>\n <Button type="primary" onClick={toggleOverlay}>\u70b9\u51fb\u5f39\u51fa\u5185\u5bb9</Button>\n <Overlay\n transitionName="animation-flipX"\n timeout={1000}\n isOpen={isOpen}\n onClose={toggleOverlay}\n >\n <Card active style={{ width: 500 }} active>\n <h3 style={{marginTop: 0}}>\u57fa\u7840\u5f39\u51fa\u5c42</h3>\n <p>Portals \u662f react 16 \u63d0\u4f9b\u7684\u5b98\u65b9\u89e3\u51b3\u65b9\u6848\uff0c\u4f7f\u5f97\u7ec4\u4ef6\u53ef\u4ee5\u8131\u79bb\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u5728DOM\u6811\u7684\u4efb\u4f55\u4f4d\u7f6e\uff0c\u6211\u4eec\u5229\u7528\u8fd9\u4e2a\u65b9\u6cd5\uff0c\u53ef\u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u5916\u9762\uff0c\u9ed8\u8ba4\u60c5\u51b5\u751f\u6210\u5230\u8ddf\u8282\u70b9\u7684\u5916\u9762\uff0c\u901a\u8fc7\u5c06 usePortal \u8bbe\u7f6e\u4e3a false \u5c06\u5bf9\u8bdd\u6846\u751f\u6210\u5728\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u7684DOM\u6811\u4e2d\u3002</p>\n <Button type="danger" onClick={toggleOverlay}>\u5173\u95ed</Button>\n </Card>\n </Overlay>\n </div>\n )\n}'}},source:"Overlay \u57fa\u7840\u5f39\u51fa\u5c42\n===\n\n[](https://jaywcjlove.github.io/#/sponsor)\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-overlay/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-overlay)\n[](https://npmjs.com/@uiw/react-overlay)\n\n\u8fd9\u662f\u4e00\u4e2a\u57fa\u7840\u7684\u5f39\u51fa\u5c42\u7ec4\u4ef6\uff0c\u5176\u5b83\u5f39\u51fa\u7ec4\u4ef6\u7684\u62bd\u8c61\u7ec4\u4ef6\uff0c\u90fd\u57fa\u4e8e\u5b83\u6765\u6269\u5c55\u6bd4\u5982 [`<Modal>`](#/components/modal)\u3001[`<Dawer>`](#/components/drawer)\u3001[`<Alert>`](#/components/alert)\u3001[`<OverlayTrigger>`](#/components/overlay-trigger)\u3001[`<Popover>`](#/components/popover)\u3001[`<Tooltip>`](#/components/tooltip) \u7b49\u3002\n\n```jsx\nimport { Overlay } from 'uiw';\n// or\nimport Overlay from '@uiw/react-overlay';\n```\n\n### \u57fa\u672c\u7528\u6cd5\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Overlay, Button, Card } from 'uiw';\n\nexport default function Demo() {\n const [isOpen, setIsOpen] = React.useState(false);\n const [hasBackdrop, setHasBackdrop] = React.useState(true);\n return (\n <div>\n <Button\n type=\"primary\"\n onClick={() => {\n setIsOpen(true)\n setHasBackdrop(true)\n }}\n >\n \u70b9\u51fb\u5f39\u51fa\u5185\u5bb9\n </Button>\n <Button\n type=\"primary\"\n onClick={() => {\n setIsOpen(true)\n setHasBackdrop(false)\n }}\n >\n \u5f39\u51fa\u5185\u5bb9\u6ca1\u6709\u906e\u7f69\u5c42\n </Button>\n <Overlay\n hasBackdrop={hasBackdrop}\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\n >\n <Card active bordered={!hasBackdrop} style={{ width: 500 }}>\n <h3 style={{margin: 0}}>\u57fa\u7840\u5f39\u51fa\u5c42 - {String(isOpen)}</h3>\n <div>\n \u8fd9\u662f\u4e00\u4e2a\u57fa\u7840\u7684\u5f39\u51fa\u5c42\u7ec4\u4ef6\uff0c\u5176\u5b83\u5f39\u51fa\u5c42\u7ec4\u4ef6\u57fa\u4e8e\u5b83\u6765\u6269\u5c55\u6bd4\u5982 Modal\u3001Alert\n </div>\n <br />\n <Button type=\"danger\" onClick={() => setIsOpen(false)}>\u5173\u95ed</Button>\n </Card>\n </Overlay>\n </div>\n )\n}\n```\n\n### \u5b8c\u5168\u5b9a\u5236\u5f39\u51fa\u5bb9\u5668\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Overlay, Button, Icon } from 'uiw';\n\nexport default function Demo() {\n const [isOpen, setIsOpen] = React.useState(false);\n return (\n <div>\n <Button\n type=\"primary\"\n onClick={() => {\n setIsOpen(!isOpen);\n }}\n >\n \u70b9\u51fb\u5f39\u51fa\u5185\u5bb9\n </Button>\n <Overlay\n backdropProps={{\n style: { backgroundColor: 'rgba(0, 0, 0, .5)' }\n }}\n isOpen={isOpen} onClose={() => setIsOpen(false)}\n >\n <div style={{ backgroundColor: '#fff', minWidth: 500 }} >\n <Icon\n onClick={() => setIsOpen(false)}\n type=\"circle-close\"\n style={{\n position: 'absolute',\n right: 0,\n top: '-20px',\n color: '#fff',\n cursor: 'pointer',\n }}\n />\n <div\n style={{\n backgroundColor: 'rgb(0, 204, 180)',\n color: 'rgb(255, 255, 255)',\n textAlign: 'center',\n padding: '34px 24px',\n }}\n >\n <h1\n style={{\n fontSize: '28px',\n fontWeight: '700',\n color: 'rgb(255, 255, 255)',\n lineHeight: '1.2',\n margin: '0px',\n }}\n >\n \u4e0b\u6b21\u9884\u8ba2\u53ef\u4eab 5 \uffe5 \u4f18\u60e0\n </h1>\n <div style={{ padding: '5px 0' }}>(5 \uffe5 ~ \xa538)</div>\n <div style={{ fontSize: '18px' }}>\u4f7f\u7528\u4fc3\u9500\u7801\uff1a <b style={{ color: '#f8e71c', margin: '0px 4px' }}>KSGI5</b></div>\n </div>\n <div style={{ padding: '24px' }}>\n <h1 style={{ fontSize: '28px', fontWeight: '700', color: 'rgb(23, 27, 30)', lineHeight: '1.2', margin: '0px 0px 4px' }}>\u8ba2\u9605 uiw \u7ec4\u4ef6\u65b0\u95fb\u901a\u8baf</h1>\n <div style={{ color: 'rgb(70, 81, 94)' }}>\u5728\u6536\u4ef6\u7bb1\u4e2d\u63a5\u6536\u72ec\u5bb6\u66f4\u65b0\u4fe1\u606f</div>\n </div>\n </div>\n </Overlay>\n </div>\n )\n}\n```\n\n### usePortal\n\n[`Portals`](https://reactjs.org/docs/portals.html#event-bubbling-through-portals) \u662f react 16 \u63d0\u4f9b\u7684\u5b98\u65b9\u89e3\u51b3\u65b9\u6848\uff0c\u4f7f\u5f97\u7ec4\u4ef6\u53ef\u4ee5\u8131\u79bb\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u5728 DOM \u6811\u7684\u4efb\u4f55\u4f4d\u7f6e\uff0c\u6211\u4eec\u5229\u7528\u8fd9\u4e2a\u65b9\u6cd5\uff0c\u53ef\u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u5916\u9762\uff0c\u9ed8\u8ba4\u60c5\u51b5\u751f\u6210\u5230\u8ddf\u8282\u70b9\u7684\u5916\u9762\uff0c\u901a\u8fc7\u5c06 `usePortal` \u8bbe\u7f6e\u4e3a `false` \u5c06\u5bf9\u8bdd\u6846\u751f\u6210\u5728\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u7684 DOM \u6811\u4e2d\u3002 \n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Overlay, Button, Card } from 'uiw';\n\nexport default function Demo() {\n const [isOpen, setIsOpen] = React.useState(false);\n function toggleOverlay(e) {\n setIsOpen(!isOpen);\n }\n return (\n <div style={{ position: 'relative', minHeight: 200 }}>\n <Button type=\"primary\" onClick={toggleOverlay}>\u70b9\u51fb\u5f39\u51fa\u5185\u5bb9</Button>\n <Overlay usePortal={false} isOpen={isOpen} onClose={toggleOverlay}>\n <Card active style={{ width: 500 }} active>\n <h3 style={{marginTop: 0}}>\u57fa\u7840\u5f39\u51fa\u5c421</h3>\n <p>Portals \u662f react 16 \u63d0\u4f9b\u7684\u5b98\u65b9\u89e3\u51b3\u65b9\u6848\uff0c\u4f7f\u5f97\u7ec4\u4ef6\u53ef\u4ee5\u8131\u79bb\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u5728DOM\u6811\u7684\u4efb\u4f55\u4f4d\u7f6e\uff0c\u6211\u4eec\u5229\u7528\u8fd9\u4e2a\u65b9\u6cd5\uff0c\u53ef\u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u5916\u9762\uff0c\u9ed8\u8ba4\u60c5\u51b5\u751f\u6210\u5230\u8ddf\u8282\u70b9\u7684\u5916\u9762\uff0c\u901a\u8fc7\u5c06 usePortal \u8bbe\u7f6e\u4e3a false \u5c06\u5bf9\u8bdd\u6846\u751f\u6210\u5728\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u7684DOM\u6811\u4e2d\u3002</p>\n <Button type=\"danger\" onClick={toggleOverlay}>\u5173\u95ed</Button>\n </Card>\n </Overlay>\n </div>\n )\n}\n```\n\n### \u81ea\u5b9a\u4e49\u52a8\u753b\n\n\u52a8\u753b\u8fc7\u6e21\u6548\u679c\u662f\u6839\u636e [`react-transition-group`](https://github.com/reactjs/react-transition-group) \u7ec4\u4ef6\u5c01\u88c5\u3002\u52a8\u753b\u65f6\u957f\u53c2\u6570 `timeout={1000}` \u662f\u6839\u636e CSS \u52a8\u753b\u6837\u5f0f\u6301\u7eed\u65f6\u957f\u6765\u5b9a\u4e49\u3002\n\n> \u6ce8\u610f\uff1a`@3.2.0` ~~`transitionDuration={1000}`~~ \u66f4\u540d\u4e3a `timeout`\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Overlay, Button, Card } from 'uiw';\n\nexport default function Demo() {\n const [isOpen, setIsOpen] = React.useState(false);\n function toggleOverlay(e) {\n setIsOpen(!isOpen);\n }\n return (\n <div>\n <Button type=\"primary\" onClick={toggleOverlay}>\u70b9\u51fb\u5f39\u51fa\u5185\u5bb9</Button>\n <Overlay\n transitionName=\"animation-flipX\"\n timeout={1000}\n isOpen={isOpen}\n onClose={toggleOverlay}\n >\n <Card active style={{ width: 500 }} active>\n <h3 style={{marginTop: 0}}>\u57fa\u7840\u5f39\u51fa\u5c42</h3>\n <p>Portals \u662f react 16 \u63d0\u4f9b\u7684\u5b98\u65b9\u89e3\u51b3\u65b9\u6848\uff0c\u4f7f\u5f97\u7ec4\u4ef6\u53ef\u4ee5\u8131\u79bb\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u5728DOM\u6811\u7684\u4efb\u4f55\u4f4d\u7f6e\uff0c\u6211\u4eec\u5229\u7528\u8fd9\u4e2a\u65b9\u6cd5\uff0c\u53ef\u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u5916\u9762\uff0c\u9ed8\u8ba4\u60c5\u51b5\u751f\u6210\u5230\u8ddf\u8282\u70b9\u7684\u5916\u9762\uff0c\u901a\u8fc7\u5c06 usePortal \u8bbe\u7f6e\u4e3a false \u5c06\u5bf9\u8bdd\u6846\u751f\u6210\u5728\u7236\u7ec4\u4ef6\u5c42\u7ea7\u6302\u8f7d\u7684DOM\u6811\u4e2d\u3002</p>\n <Button type=\"danger\" onClick={toggleOverlay}>\u5173\u95ed</Button>\n </Card>\n </Overlay>\n </div>\n )\n}\n```\n\n\u4f60\u53ef\u4ee5\u6839\u636e\u52a8\u753b\u6837\u5f0f\u5e93 [**`animate.css`**](https://daneden.github.io/animate.css/) \u6dfb\u52a0\u4e0d\u540c\u7684\u51fa\u5165\u52a8\u753b\u3002\u9ed8\u8ba4\u901a\u8fc7\u7684 [`Less`](http://lesscss.org/) \u751f\u6210 CSS \u52a8\u753b\u7684\u5b9e\u4f8b\u4ee3\u7801\uff0c\u5b9a\u4e49 `transitionName` \u52a8\u753b\u6837\u5f0f\u540d\u5b57\u4e3a `animation-bouce`\uff0c\u4e0b\u9762\u662f\u4e0a\u9762\u5b9e\u4f8b\u7684\u6837\u5f0f\uff1a\n\n```less\n@animation-prefix:~\"animation-flipX\";\n// \u906e\u7f69\u5c42\u52a8\u753b\n// Background animation\n.@{animation-prefix}-enter .w-overlay-backdrop {\n opacity: 0.01;\n}\n.@{animation-prefix}-enter-active .w-overlay-backdrop {\n opacity: 1;\n transition: opacity 1s ease-in;\n}\n.@{animation-prefix}-exit .w-overlay-backdrop {\n opacity: 1;\n}\n.@{animation-prefix}-exit-active .w-overlay-backdrop {\n opacity: 0.01;\n transition: opacity 1s ease-in;\n}\n// \u5bf9\u8bdd\u6846\u52a8\u753b\n// Content animation\n.@{animation-prefix}-enter-active .w-overlay-content {\n animation-duration: 1s;\n animation-fill-mode: both;\n animation-name: flipInX;\n}\n.@{animation-prefix}-exit-active .w-overlay-content {\n animation-duration: 1s;\n animation-fill-mode: both;\n animation-name: flipOutX;\n}\n\n.@{animation-prefix}-enter,\n.@{animation-prefix}-enter-done,\n.@{animation-prefix}-exit {\n display: inherit;\n}\n\n@keyframes flipOutX {\n 0% { transform: perspective(400px); }\n 30% {\n transform: perspective(400px) rotateX(-20deg);\n opacity: 1;\n }\n to {\n transform: perspective(400px) rotateX(90deg);\n opacity: 0;\n }\n}\n\n@keyframes flipInX {\n 0% {\n transform: perspective(400px) rotateX(90deg);\n animation-timing-function: ease-in;\n opacity: 0;\n }\n 40% {\n transform: perspective(400px) rotateX(-20deg);\n animation-timing-function: ease-in;\n }\n 60% {\n transform: perspective(400px) rotateX(10deg);\n opacity: 1;\n }\n 80% {\n transform: perspective(400px) rotateX(-5deg);\n }\n to { transform: perspective(400px); }\n}\n```\n\n## Overlay\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| isOpen | \u5bf9\u8bdd\u6846\u662f\u5426\u53ef\u89c1 | boolean | `false` |\n| usePortal | \u4f7f\u7528 react 16 \u63d0\u4f9b\u7684\u5b98\u65b9\u89e3\u51b3\u65b9\u6848 [`Portals`](https://reactjs.org/docs/portals.html#event-bubbling-through-portals)\uff0c\u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u5916\u9762\u3002 | boolean | `true` |\n| maskClosable | \u70b9\u51