@uiw/doc
Version:
UIW documentation website.
2 lines • 34.1 kB
JavaScript
(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9899],{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:()=>p});var r=n(8573),o=n(6320),a=n(8563),l=n(7622),u=n(7937);const i={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"};var c=n(4760);function s(){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,c.jsxs)("div",{className:i.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",n&&(0,c.jsx)("a",{href:n,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,c.jsx)("br",{}),(0,c.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const f=o.ZP.Preview,d=o.ZP.Code,y=o.ZP.Toolbar,m=e=>{var t,n;let{node:l,components:u,data:i,...s}=e;const m=(0,r.useRef)(null),{headings:p,headingsList:_,...b}=s;(0,r.useEffect)((()=>{if(m.current){const e=m.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(m.current,e)}}),[m]);const L=null===l||void 0===l||null===(t=l.position)||void 0===t?void 0:t.start.line,g=null===l||void 0===l||null===(n=l.data)||void 0===n?void 0:n.meta,h=(0,a.Mx)(g)||String(L),C=u["".concat(h)];if(h&&"function"===typeof C){const e=i[h].value||"",t=(0,a.aE)(g||"");return(0,c.jsxs)(o.ZP,{ref:m,children:[(0,c.jsx)(f,{style:{background:t.bg||"transparent"},children:(0,c.jsx)(C,{})}),(0,c.jsx)(y,{text:e,children:t.title||"Example"}),(0,c.jsx)(d,{children:(0,c.jsx)("pre",{...b})})]})}return(0,c.jsx)("code",{...b})};function p(e){return(0,c.jsxs)(r.Fragment,{children:[(0,c.jsx)(l.Z,{className:i.markdownWrap,source:e.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:t=>(0,c.jsx)(m,{...e,...t})}}),(0,c.jsx)(s,{path:e.path})]})}},6134:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>l});const r={components:{33: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=a(n(8573)),r=(a(n(6836)),function(t,n){if(!n&&t&&t.__esModule)return t;if(null===t||"object"!=e(t)&&"function"!=typeof t)return{default:t};var r=o(n);if(r&&r.has(t))return r.get(t);var a={__proto__:null},l=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in t)if("default"!==u&&Object.prototype.hasOwnProperty.call(t,u)){var i=l?Object.getOwnPropertyDescriptor(t,u):null;i&&(i.get||i.set)?Object.defineProperty(a,u,i):a[u]=t[u]}return a.default=t,r&&r.set(t,a),a}(n(6394)));function o(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(o=function(e){return e?n:t})(e)}function a(e){return e&&e.__esModule?e:{default:e}}function l(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,o,a,l,u=[],i=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;i=!1}else for(;!(i=(r=a.call(n)).done)&&(u.push(r.value),u.length!==t);i=!0);}catch(e){c=!0,o=e}finally{try{if(!i&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(c)throw o}}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}var i=r.default.Header,c=r.default.Footer,s=r.default.Sider,f=r.default.Content,d={color:"#fff"},y={background:"#484a4e",color:"#fff",display:"flex",justifyContent:"center",alignItems:"center"},m={background:"#108ee9",minHeight:120,display:"flex",justifyContent:"center",alignItems:"center",color:"#fff"};return function(){var e=l(t.default.useState(!1),2);return e[0],e[1],t.default.createElement("div",null,t.default.createElement(r.default,{style:{marginBottom:20}},t.default.createElement(i,{style:d},"Header"),t.default.createElement(r.default,null,t.default.createElement(s,{style:y},"Sider"),t.default.createElement(f,{style:m},"Content")),t.default.createElement(c,null,"Footer")),t.default.createElement(r.default,null,t.default.createElement(i,{style:d},"Header"),t.default.createElement(r.default,null,t.default.createElement(f,{style:m},"Content"),t.default.createElement(s,{style:y},"Sider")),t.default.createElement(c,null,"Footer")),t.default.createElement(r.default,null,t.default.createElement(r.LayoutHeader,{style:d},"Header"),t.default.createElement(r.default,null,t.default.createElement(r.LayoutContent,{style:m},"Content"),t.default.createElement(r.LayoutSider,{style:y},"Sider")),t.default.createElement(r.LayoutFooter,null,"Footer")))}}(),82:function(){var e=r(n(8573)),t=(r(n(6836)),r(n(6394)));function r(e){return e&&e.__esModule?e:{default:e}}function o(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,o,a,l,u=[],i=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;i=!1}else for(;!(i=(r=a.call(n)).done)&&(u.push(r.value),u.length!==t);i=!0);}catch(e){c=!0,o=e}finally{try{if(!i&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(c)throw o}}return u}}(e,t)||function(e,t){if(!e)return;if("string"===typeof e)return a(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 a(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 a(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}var l=t.default.Header,u=t.default.Footer,i=(t.default.Sider,t.default.Content),c={color:"#fff"},s={background:"#108ee9",minHeight:120,display:"flex",justifyContent:"center",alignItems:"center",color:"#fff"};return function(){var n=o(e.default.useState(!1),2);return n[0],n[1],e.default.createElement(t.default,{style:{marginBottom:20}},e.default.createElement(l,{style:c},"Header"),e.default.createElement(i,{style:s},"Content"),e.default.createElement(u,null,"Footer"))}}(),107:function(){var e=r(n(8573)),t=(r(n(6836)),r(n(6394)));function r(e){return e&&e.__esModule?e:{default:e}}function o(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,o,a,l,u=[],i=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;i=!1}else for(;!(i=(r=a.call(n)).done)&&(u.push(r.value),u.length!==t);i=!0);}catch(e){c=!0,o=e}finally{try{if(!i&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(c)throw o}}return u}}(e,t)||function(e,t){if(!e)return;if("string"===typeof e)return a(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 a(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 a(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}var l=t.default.Header,u=t.default.Footer,i=t.default.Sider,c=t.default.Content,s={color:"#fff"},f={background:"#484a4e",color:"#fff",display:"flex",justifyContent:"center",alignItems:"center"},d={background:"#108ee9",minHeight:120,display:"flex",justifyContent:"center",alignItems:"center",color:"#fff"};return function(){var n=o(e.default.useState(!1),2),r=n[0],a=n[1];return e.default.createElement(t.default,{style:{marginBottom:20}},e.default.createElement(i,{collapsed:r,style:f},"Sider"),e.default.createElement(t.default,null,e.default.createElement(l,{style:s},e.default.createElement("button",{onClick:function(){return a(!r)}},r?">>":"<<")),e.default.createElement(c,{style:d},"Content"),e.default.createElement(u,null,"Footer")))}}()},data:{33:{name:33,meta:{},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 _reactDom = _interopRequireDefault(require("react-dom"));\nvar _reactLayout = _interopRequireWildcard(require("@uiw/react-layout"));\nfunction _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }\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; }\nvar Header = _reactLayout["default"].Header,\n Footer = _reactLayout["default"].Footer,\n Sider = _reactLayout["default"].Sider,\n Content = _reactLayout["default"].Content;\nvar stylHeader = {\n color: \'#fff\'\n};\nvar stylSider = {\n background: \'#484a4e\',\n color: \'#fff\',\n display: \'flex\',\n justifyContent: \'center\',\n alignItems: \'center\'\n};\nvar stylConten = {\n background: \'#108ee9\',\n minHeight: 120,\n display: \'flex\',\n justifyContent: \'center\',\n alignItems: \'center\',\n color: \'#fff\'\n};\nfunction Demo() {\n var _React$useState = _react["default"].useState(false),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n collapsed = _React$useState2[0],\n setCollapsed = _React$useState2[1];\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactLayout["default"], {\n style: {\n marginBottom: 20\n }\n }, /*#__PURE__*/_react["default"].createElement(Header, {\n style: stylHeader\n }, "Header"), /*#__PURE__*/_react["default"].createElement(_reactLayout["default"], null, /*#__PURE__*/_react["default"].createElement(Sider, {\n style: stylSider\n }, "Sider"), /*#__PURE__*/_react["default"].createElement(Content, {\n style: stylConten\n }, "Content")), /*#__PURE__*/_react["default"].createElement(Footer, null, "Footer")), /*#__PURE__*/_react["default"].createElement(_reactLayout["default"], null, /*#__PURE__*/_react["default"].createElement(Header, {\n style: stylHeader\n }, "Header"), /*#__PURE__*/_react["default"].createElement(_reactLayout["default"], null, /*#__PURE__*/_react["default"].createElement(Content, {\n style: stylConten\n }, "Content"), /*#__PURE__*/_react["default"].createElement(Sider, {\n style: stylSider\n }, "Sider")), /*#__PURE__*/_react["default"].createElement(Footer, null, "Footer")), /*#__PURE__*/_react["default"].createElement(_reactLayout["default"], null, /*#__PURE__*/_react["default"].createElement(_reactLayout.LayoutHeader, {\n style: stylHeader\n }, "Header"), /*#__PURE__*/_react["default"].createElement(_reactLayout["default"], null, /*#__PURE__*/_react["default"].createElement(_reactLayout.LayoutContent, {\n style: stylConten\n }, "Content"), /*#__PURE__*/_react["default"].createElement(_reactLayout.LayoutSider, {\n style: stylSider\n }, "Sider")), /*#__PURE__*/_react["default"].createElement(_reactLayout.LayoutFooter, null, "Footer")));\n}\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Layout, { LayoutHeader, LayoutContent, LayoutSider, LayoutFooter } from '@uiw/react-layout';\nconst { Header, Footer, Sider, Content } = Layout;\n\nconst stylHeader = { color: '#fff' }\nconst stylSider = { background: '#484a4e', color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center' }\nconst stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }\n\nfunction Demo() {\n const [collapsed, setCollapsed] = React.useState(false)\n return (\n <div>\n <Layout style={{ marginBottom: 20 }}>\n <Header style={stylHeader}>Header</Header>\n <Layout>\n <Sider style={stylSider}>Sider</Sider>\n <Content style={stylConten}>Content</Content>\n </Layout>\n <Footer>Footer</Footer>\n </Layout>\n\n <Layout>\n <Header style={stylHeader}>Header</Header>\n <Layout>\n <Content style={stylConten}>Content</Content>\n <Sider style={stylSider}>Sider</Sider>\n </Layout>\n <Footer>Footer</Footer>\n </Layout>\n\n <Layout>\n <LayoutHeader style={stylHeader}>Header</LayoutHeader>\n <Layout>\n <LayoutContent style={stylConten}>Content</LayoutContent>\n <LayoutSider style={stylSider}>Sider</LayoutSider>\n </Layout>\n <LayoutFooter>Footer</LayoutFooter>\n </Layout>\n </div>\n );\n}\n\nexport default Demo;"},82:{name:82,meta:{},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _reactDom = _interopRequireDefault(require("react-dom"));\nvar _reactLayout = _interopRequireDefault(require("@uiw/react-layout"));\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; }\nvar Header = _reactLayout["default"].Header,\n Footer = _reactLayout["default"].Footer,\n Sider = _reactLayout["default"].Sider,\n Content = _reactLayout["default"].Content;\nvar stylHeader = {\n color: \'#fff\'\n};\nvar stylConten = {\n background: \'#108ee9\',\n minHeight: 120,\n display: \'flex\',\n justifyContent: \'center\',\n alignItems: \'center\',\n color: \'#fff\'\n};\nfunction Demo() {\n var _React$useState = _react["default"].useState(false),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n collapsed = _React$useState2[0],\n setCollapsed = _React$useState2[1];\n return /*#__PURE__*/_react["default"].createElement(_reactLayout["default"], {\n style: {\n marginBottom: 20\n }\n }, /*#__PURE__*/_react["default"].createElement(Header, {\n style: stylHeader\n }, "Header"), /*#__PURE__*/_react["default"].createElement(Content, {\n style: stylConten\n }, "Content"), /*#__PURE__*/_react["default"].createElement(Footer, null, "Footer"));\n}\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Layout from '@uiw/react-layout';\nconst { Header, Footer, Sider, Content } = Layout;\n\nconst stylHeader = { color: '#fff' }\nconst stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }\n\nfunction Demo() {\n const [collapsed, setCollapsed] = React.useState(false)\n return (\n <Layout style={{ marginBottom: 20 }}>\n <Header style={stylHeader}>Header</Header>\n <Content style={stylConten}>Content</Content>\n <Footer>Footer</Footer>\n </Layout>\n );\n}\n\nexport default Demo;"},107:{name:107,meta:{},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _reactDom = _interopRequireDefault(require("react-dom"));\nvar _reactLayout = _interopRequireDefault(require("@uiw/react-layout"));\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; }\nvar Header = _reactLayout["default"].Header,\n Footer = _reactLayout["default"].Footer,\n Sider = _reactLayout["default"].Sider,\n Content = _reactLayout["default"].Content;\nvar stylHeader = {\n color: \'#fff\'\n};\nvar stylSider = {\n background: \'#484a4e\',\n color: \'#fff\',\n display: \'flex\',\n justifyContent: \'center\',\n alignItems: \'center\'\n};\nvar stylConten = {\n background: \'#108ee9\',\n minHeight: 120,\n display: \'flex\',\n justifyContent: \'center\',\n alignItems: \'center\',\n color: \'#fff\'\n};\nfunction Demo() {\n var _React$useState = _react["default"].useState(false),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n collapsed = _React$useState2[0],\n setCollapsed = _React$useState2[1];\n return /*#__PURE__*/_react["default"].createElement(_reactLayout["default"], {\n style: {\n marginBottom: 20\n }\n }, /*#__PURE__*/_react["default"].createElement(Sider, {\n collapsed: collapsed,\n style: stylSider\n }, "Sider"), /*#__PURE__*/_react["default"].createElement(_reactLayout["default"], null, /*#__PURE__*/_react["default"].createElement(Header, {\n style: stylHeader\n }, /*#__PURE__*/_react["default"].createElement("button", {\n onClick: function onClick() {\n return setCollapsed(!collapsed);\n }\n }, collapsed ? \'>>\' : \'<<\')), /*#__PURE__*/_react["default"].createElement(Content, {\n style: stylConten\n }, "Content"), /*#__PURE__*/_react["default"].createElement(Footer, null, "Footer")));\n}\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Layout from '@uiw/react-layout';\nconst { Header, Footer, Sider, Content } = Layout;\n\nconst stylHeader = { color: '#fff' }\nconst stylSider = { background: '#484a4e', color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center' }\nconst stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }\n\nfunction Demo() {\n const [collapsed, setCollapsed] = React.useState(false)\n return (\n <Layout style={{ marginBottom: 20 }}>\n <Sider collapsed={collapsed} style={stylSider}>Sider</Sider>\n <Layout>\n <Header style={stylHeader}>\n <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? '>>' : '<<'}</button>\n </Header>\n <Content style={stylConten}>Content</Content>\n <Footer>Footer</Footer>\n </Layout>\n </Layout>\n );\n}\n\nexport default Demo;"}},source:"Layout \u5e03\u5c40\n===\n\n[](https://www.npmjs.com/package/@uiw/react-layout)\n[](https://github.com/uiwjs/react-layout/actions/workflows/ci.yml)\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-layout/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-layout)\n[](https://uiwjs.github.io/react-layout/coverage/lcov-report/)\n[](https://gitpod.io/#https://github.com/uiwjs/react-layout)\n\n\u534f\u52a9\u8fdb\u884c\u9875\u9762\u7ea7\u6574\u4f53\u5e03\u5c40\u3002\n\n> \u26a0\ufe0f \u6ce8\u610f\uff1a\u91c7\u7528 flex \u5e03\u5c40\u5b9e\u73b0\uff0c\u8bf7\u6ce8\u610f[\u6d4f\u89c8\u5668\u517c\u5bb9\u6027](http://caniuse.com/#search=flex)\u95ee\u9898\u3002\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n\x3c!--rehype--\x3e\n```jsx\nimport { Layout } from 'uiw';\n// or\nimport Layout from '@uiw/react-layout';\nconst { Header, Footer, Sider, Content } = Layout;\n// or\nimport Layout, { LayoutHeader, LayoutContent, LayoutSider, LayoutFooter } from '@uiw/react-layout';\n\nLayout.Header === LayoutHeader\nLayout.Content === LayoutContent\nLayout.Sider === LayoutSider\nLayout.Footer === LayoutFooter\n```\n\n## \u57fa\u672c\u7528\u6cd5\n\n```jsx mdx:preview\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Layout, { LayoutHeader, LayoutContent, LayoutSider, LayoutFooter } from '@uiw/react-layout';\nconst { Header, Footer, Sider, Content } = Layout;\n\nconst stylHeader = { color: '#fff' }\nconst stylSider = { background: '#484a4e', color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center' }\nconst stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }\n\nfunction Demo() {\n const [collapsed, setCollapsed] = React.useState(false)\n return (\n <div>\n <Layout style={{ marginBottom: 20 }}>\n <Header style={stylHeader}>Header</Header>\n <Layout>\n <Sider style={stylSider}>Sider</Sider>\n <Content style={stylConten}>Content</Content>\n </Layout>\n <Footer>Footer</Footer>\n </Layout>\n\n <Layout>\n <Header style={stylHeader}>Header</Header>\n <Layout>\n <Content style={stylConten}>Content</Content>\n <Sider style={stylSider}>Sider</Sider>\n </Layout>\n <Footer>Footer</Footer>\n </Layout>\n\n <Layout>\n <LayoutHeader style={stylHeader}>Header</LayoutHeader>\n <Layout>\n <LayoutContent style={stylConten}>Content</LayoutContent>\n <LayoutSider style={stylSider}>Sider</LayoutSider>\n </Layout>\n <LayoutFooter>Footer</LayoutFooter>\n </Layout>\n </div>\n );\n}\n\nexport default Demo;\n```\n\n## \u4e0a\u4e2d\u4e0b\u5e03\u5c40\n\n```jsx mdx:preview\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Layout from '@uiw/react-layout';\nconst { Header, Footer, Sider, Content } = Layout;\n\nconst stylHeader = { color: '#fff' }\nconst stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }\n\nfunction Demo() {\n const [collapsed, setCollapsed] = React.useState(false)\n return (\n <Layout style={{ marginBottom: 20 }}>\n <Header style={stylHeader}>Header</Header>\n <Content style={stylConten}>Content</Content>\n <Footer>Footer</Footer>\n </Layout>\n );\n}\n\nexport default Demo;\n```\n\n## \u5de6\u53f3\u5e03\u5c40\n\n```jsx mdx:preview\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Layout from '@uiw/react-layout';\nconst { Header, Footer, Sider, Content } = Layout;\n\nconst stylHeader = { color: '#fff' }\nconst stylSider = { background: '#484a4e', color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center' }\nconst stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }\n\nfunction Demo() {\n const [collapsed, setCollapsed] = React.useState(false)\n return (\n <Layout style={{ marginBottom: 20 }}>\n <Sider collapsed={collapsed} style={stylSider}>Sider</Sider>\n <Layout>\n <Header style={stylHeader}>\n <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? '>>' : '<<'}</button>\n </Header>\n <Content style={stylConten}>Content</Content>\n <Footer>Footer</Footer>\n </Layout>\n </Layout>\n );\n}\n\nexport default Demo;\n```\n\n## Layout\n\n\u5e03\u5c40\u5bb9\u5668\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957 `Header` `Sider` `Content` `Footer` \u6216 `Layout` \u672c\u8eab\uff0c\u53ef\u4ee5\u653e\u5728\u4efb\u4f55\u7236\u5bb9\u5668\u4e2d\u3002\n\n* `Header`\uff1a\u9876\u90e8\u5e03\u5c40\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 `Layout` \u4e2d\u3002\n* `Sider`\uff1a\u4fa7\u8fb9\u680f\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\u53ca\u57fa\u672c\u529f\u80fd\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 `Layout` \u4e2d\u3002\n* `Content`\uff1a\u5185\u5bb9\u90e8\u5206\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 `Layout` \u4e2d\u3002\n* `Footer`\uff1a\u5e95\u90e8\u5e03\u5c40\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 `Layout` \u4e2d\u3002\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| className | \u5bb9\u5668 className | string | - |\n| style | \u6307\u5b9a\u6837\u5f0f | CSSProperties | - |\n| hasSider | \u8868\u793a\u5b50\u5143\u7d20\u91cc\u6709 Sider\uff0c\u4e00\u822c\u4e0d\u7528\u6307\u5b9a\u3002\u53ef\u7528\u4e8e\u670d\u52a1\u7aef\u6e32\u67d3\u65f6\u907f\u514d\u6837\u5f0f\u95ea\u52a8 | boolean | - |\n\x3c!-- | theme | \u4e3b\u9898\u989c\u8272 | `light`\u3001`dark` | `dark` | --\x3e\n\n## Header\n\n```ts\nimport Layout, { LayoutHeader } from '@uiw/react-layout';\nLayout.Header === LayoutHeader\n```\n\n```ts\nimport React from 'react';\nexport interface LayoutHeaderProps extends React.HTMLAttributes<HTMLElement> {\n prefixCls?: string;\n children?: React.ReactNode;\n}\nexport declare const LayoutHeader: React.ForwardRefExoticComponent<LayoutHeaderProps & React.RefAttributes<HTMLElement>>;\n```\n\n## Content\n\n```ts\nimport Layout, { LayoutContent } from '@uiw/react-layout';\nLayout.Content === LayoutContent\n```\n\n```ts\nimport React from 'react';\nexport interface LayoutContentProps extends React.HTMLAttributes<HTMLElement> {\n prefixCls?: string;\n children?: React.ReactNode;\n}\nexport declare const LayoutContent: React.ForwardRefExoticComponent<LayoutContentProps & React.RefAttributes<HTMLElement>>;\n```\n\n## Footer\n\n```ts\nimport Layout, { LayoutFooter } from '@uiw/react-layout';\nLayout.Footer === LayoutFooter\n```\n\n```ts\nimport React from 'react';\nexport interface LayoutFooterProps extends React.HTMLAttributes<HTMLElement> {\n prefixCls?: string;\n children?: React.ReactNode;\n}\nexport declare const LayoutFooter: React.ForwardRefExoticComponent<LayoutFooterProps & React.RefAttributes<HTMLElement>>;\n```\n\n## Layout.Sider\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| className | \u5bb9\u5668 className | string | - |\n| style | \u6307\u5b9a\u6837\u5f0f | CSSProperties | - |\n| collapsed | \u5f53\u524d\u6536\u8d77\u72b6\u6001 | boolean | - |\n| collapsedWidth | \u6536\u7f29\u5bbd\u5ea6\uff0c\u8bbe\u7f6e\u4e3a `0` | boolean | `80` |\n| width | \u5bbd\u5ea6 | number/string | 200 |\n\n```ts\nimport Layout, { LayoutSider } from '@uiw/react-layout';\nLayout.Sider === LayoutSider\n```\n\n```ts\nimport React from 'react';\nexport declare function randomid(): string;\nexport interface LayoutSiderProps extends React.HTMLAttributes<HTMLElement> {\n prefixCls?: string;\n children?: React.ReactNode;\n /** Width of the sidebar */\n width?: number | string;\n /** Width of the collapsed sidebar, by setting to 0 a special trigger will appear */\n collapsedWidth?: number;\n /** To set the current status */\n collapsed?: boolean;\n}\nexport declare const LayoutSider: React.ForwardRefExoticComponent<LayoutSiderProps & React.RefAttributes<HTMLDivElement>>;\n```\n",headings:[],headingsList:[]};var o=n(5301),a=n(4760);function l(){return(0,a.jsx)(o.Z,{...r,path:"https://github.com/uiwjs/react-layout/edit/main/core/README-zh.md"})}}}]);
//# sourceMappingURL=9899.821e574d.chunk.js.map