@uiw/doc/web/static/js/vendors-uiwjs.45c0fcba.js

UIW documentation website.

/*! For license information please see vendors-uiwjs.45c0fcba.js.LICENSE.txt */
(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1908],{3376:function(e){e.exports=function(){"use strict";function e(e,t){if("undefined"===typeof document)return;const n=document.createElement("textarea");n.value=e,n.setAttribute("readonly",""),n.style={position:"absolute",left:"-9999px"},document.body.appendChild(n);const i=document.getSelection().rangeCount>0&&document.getSelection().getRangeAt(0);n.select();let r=!1;try{r=!!document.execCommand("copy")}catch(a){r=!1}document.body.removeChild(n),i&&document.getSelection&&(document.getSelection().removeAllRanges(),document.getSelection().addRange(i)),t&&t(r)}return e}()},2656:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>d});var i=n(5773),r=n(808),a=n(8573),o=n(4760),l=["prefixCls","className","children","mode","visiable","visible","renderBar","lineBar","disable","onDragEnd","onDragging"];class d extends a.Component{constructor(e){super(e),this.state={dragging:!1},this.warpper=void 0,this.paneNumber=void 0,this.startX=void 0,this.startY=void 0,this.move=void 0,this.target=void 0,this.boxWidth=void 0,this.boxHeight=void 0,this.preWidth=void 0,this.nextWidth=void 0,this.preHeight=void 0,this.nextHeight=void 0,this.preSize=void 0,this.nextSize=void 0,this.onDragEnd=this.onDragEnd.bind(this),this.onDragging=this.onDragging.bind(this)}componentWillUnmount(){this.removeEvent()}removeEvent(){window.removeEventListener("mousemove",this.onDragging,!1),window.removeEventListener("mouseup",this.onDragEnd,!1)}onMouseDown(e,t){if(t.target&&this.warpper){this.paneNumber=e,this.startX=t.clientX,this.startY=t.clientY,this.move=!0,this.target=t.target.parentNode;var n=this.target.previousElementSibling,i=this.target.nextElementSibling;this.boxWidth=this.warpper.clientWidth,this.boxHeight=this.warpper.clientHeight,n&&(this.preWidth=n.clientWidth,this.preHeight=n.clientHeight),i&&(this.nextWidth=i.clientWidth,this.nextHeight=i.clientHeight),window.addEventListener("mousemove",this.onDragging),window.addEventListener("mouseup",this.onDragEnd,!1),this.setState({dragging:!0})}}onDragging(e){if(this.move){this.state.dragging||this.setState({dragging:!0});var{mode:t,onDragging:n}=this.props,i=this.target.nextElementSibling,r=this.target.previousElementSibling,a=e.clientX-this.startX,o=e.clientY-this.startY;if(this.preSize=0,this.nextSize=0,"horizontal"===t){if(this.preSize=this.preWidth+a>-1?this.preWidth+a:0,this.nextSize=this.nextWidth-a>-1?this.nextWidth-a:0,0===this.preSize||0===this.nextSize)return;this.preSize=100*(this.preSize/this.boxWidth>=1?1:this.preSize/this.boxWidth),this.nextSize=100*(this.nextSize/this.boxWidth>=1?1:this.nextSize/this.boxWidth),r&&i&&(r.style.width=this.preSize+"%",i.style.width=this.nextSize+"%")}if("vertical"===t&&this.preHeight+o>-1&&this.nextHeight-o>-1){if(this.preSize=this.preHeight+o>-1?this.preHeight+o:0,this.nextSize=this.nextHeight-o>-1?this.nextHeight-o:0,this.preSize=100*(this.preSize/this.boxHeight>=1?1:this.preSize/this.boxHeight),this.nextSize=100*(this.nextSize/this.boxHeight>=1?1:this.nextSize/this.boxHeight),0===this.preSize||0===this.nextSize)return;r&&i&&(r.style.height=this.preSize+"%",i.style.height=this.nextSize+"%")}n&&n(this.preSize,this.nextSize,this.paneNumber)}}onDragEnd(){var{onDragEnd:e}=this.props;this.move=!1,e&&e(this.preSize,this.nextSize,this.paneNumber),this.removeEvent(),this.setState({dragging:!1})}render(){var e,t=this.props,{prefixCls:n,className:d,children:s,mode:u,visible:c=(null!=(e=this.props.visible)?e:this.props.visiable),renderBar:f,lineBar:p,disable:m}=t,h=(0,r.Z)(t,l),{dragging:v}=this.state,_=[n,d,n+"-"+u,v?"dragging":null].filter(Boolean).join(" ").trim(),b=a.Children.toArray(s);return(0,o.jsx)("div",(0,i.Z)({className:_},h,{ref:e=>this.warpper=e,children:a.Children.map(b,((e,t)=>{var r=Object.assign({},e.props,{className:[n+"-pane",e.props.className].filter(Boolean).join(" ").trim(),style:(0,i.Z)({},e.props.style)}),l=!0===c||c&&c.includes(t+1)||!1,d={className:[n+"-bar",p?n+"-line-bar":null,p?null:n+"-large-bar"].filter(Boolean).join(" ").trim()};(!0===m||m&&m.includes(t+1))&&(d.className=[d.className,m?"disable":null].filter(Boolean).join(" ").trim());var s=null;return 0!==t&&l&&f?s=f((0,i.Z)({},d,{onMouseDown:this.onMouseDown.bind(this,t+1)})):0!==t&&l&&(s=a.createElement("div",(0,i.Z)({},d),(0,o.jsx)("div",{onMouseDown:this.onMouseDown.bind(this,t+1)}))),(0,o.jsxs)(a.Fragment,{children:[s,a.cloneElement(e,(0,i.Z)({},r))]},t)}))}))}}d.defaultProps={prefixCls:"w-split",visiable:!0,mode:"horizontal"}},1684:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});const i={components:{32:function(){var e=i(n(8573)),t=i(n(2656));function i(e){return e&&e.__esModule?e:{default:e}}return function(){return e.default.createElement("div",null,e.default.createElement(t.default,{style:{height:100,border:"1px solid #d5d5d5",borderRadius:3}},e.default.createElement("div",{style:{width:"20%",minWidth:30}},e.default.createElement("iframe",{srcDoc:"<div>test</div>",style:{width:"100%",height:"100%"},title:"Code Preview",sandbox:"allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts"})),e.default.createElement("div",{style:{width:"80%",minWidth:100}},"Right Pane")),e.default.createElement(t.default,{style:{height:100,border:"1px solid #d5d5d5",borderRadius:3}},e.default.createElement("div",{style:{minWidth:60}},"test"),e.default.createElement("div",{style:{minWidth:80,flex:1}},"Right Pane")))}}(),62:function(){var e=i(n(8573)),t=i(n(2656));function i(e){return e&&e.__esModule?e:{default:e}}return function(){return e.default.createElement("div",null,e.default.createElement(t.default,{mode:"vertical",visiable:!1},e.default.createElement("div",{style:{minHeight:45,background:"#dcdcdc"}},"Header"),e.default.createElement(t.default,{visiable:!1},e.default.createElement("div",{style:{minWidth:200,maxWidth:200,minHeight:120,background:"#b5b5b5"}},"Sider"),e.default.createElement("div",{style:{width:"100%",background:"#ececec"}},"Content")),e.default.createElement("div",{style:{minHeight:45,background:"#dcdcdc"}},"Footer")),e.default.createElement("div",{style:{height:20}}),e.default.createElement(t.default,{visiable:!1},e.default.createElement("div",{style:{minWidth:200,maxWidth:200,minHeight:85,background:"#a9a9a9"}},"Sider"),e.default.createElement(t.default,{mode:"vertical",visiable:!1,style:{width:"100%"}},e.default.createElement("div",{style:{minHeight:45,background:"#dcdcdc"}},"Header"),e.default.createElement("div",{style:{minHeight:85,background:"#b5b5b5"}},"Content"),e.default.createElement("div",{style:{minHeight:45,background:"#dcdcdc"}},"Footer"))))}}(),92:function(){var e=i(n(8573)),t=i(n(2656));function i(e){return e&&e.__esModule?e:{default:e}}return function(){return e.default.createElement(t.default,{style:{height:100,border:"1px solid #d5d5d5",borderRadius:3}},e.default.createElement("div",null,"Left Pane"),e.default.createElement("div",null,"Center Pane"),e.default.createElement("div",null,"Center Pane"),e.default.createElement("div",{style:{flex:1}},"Right Pane"))}}(),109:function(){var e=i(n(8573)),t=i(n(2656));function i(e){return e&&e.__esModule?e:{default:e}}return function(){return e.default.createElement("div",null,e.default.createElement(t.default,{lineBar:!0,style:{height:100,border:"1px solid #d5d5d5",borderRadius:3}},e.default.createElement("div",null,"Left Pane"),e.default.createElement("div",null,"Center Pane"),e.default.createElement("div",null,"Center Pane"),e.default.createElement("div",{style:{flex:1}},"Right Pane")),e.default.createElement(t.default,{mode:"vertical",lineBar:!0,style:{height:210,border:"1px solid #d5d5d5",borderRadius:3,marginTop:10}},e.default.createElement("div",{style:{height:"33.3%"}},"Left Pane"),e.default.createElement("div",{style:{height:"33.3%"}},"Center Pane"),e.default.createElement("div",{style:{flex:1}},"Right Pane")))}}(),133:function(){var e=i(n(8573)),t=i(n(2656));function i(e){return e&&e.__esModule?e:{default:e}}return function(){return e.default.createElement(t.default,{mode:"vertical",style:{height:200,border:"1px solid #d5d5d5",borderRadius:3}},e.default.createElement("div",{style:{height:"50%"}},"Top Pane"),e.default.createElement("div",{style:{height:"50%"}},"Bottom Pane"))}}(),148:function(){var e=i(n(8573)),t=i(n(2656));function i(e){return e&&e.__esModule?e:{default:e}}return function(){return e.default.createElement(t.default,{style:{height:200,border:"1px solid #d5d5d5",borderRadius:3}},e.default.createElement(t.default,{mode:"vertical"},e.default.createElement("div",{style:{height:"50%"}},"Top Pane"),e.default.createElement(t.default,{style:{height:"50%"}},e.default.createElement("div",null,"Left Pane"),e.default.createElement("div",{style:{flex:1}},"Right Pane"))),e.default.createElement("div",{style:{flex:1}},"Right Pane"))}}(),171:function(){var e=i(n(8573)),t=i(n(2656));function i(e){return e&&e.__esModule?e:{default:e}}return function(){return e.default.createElement("div",null,e.default.createElement(t.default,{visiable:!1,style:{height:100,border:"1px solid #d5d5d5",borderRadius:3}},e.default.createElement("div",{style:{maxWidth:100,backgroundColor:"#eaeaea"}},"Left Pane"),e.default.createElement("div",{style:{flex:1}},"Right Pane")),e.default.createElement(t.default,{visiable:[4,5],style:{height:100,border:"1px solid #d5d5d5",borderRadius:3,marginTop:10}},e.default.createElement("div",{style:{maxWidth:50,backgroundColor:"#eaeaea"}},"Pane 1"),e.default.createElement("div",{style:{maxWidth:60}},"Pane 2"),e.default.createElement("div",null,"Pane 3"),e.default.createElement("div",null,"Pane 4"),e.default.createElement("div",{style:{flex:1}},"Pane 5")))}}(),197:function(){var e=i(n(8573)),t=i(n(2656));function i(e){return e&&e.__esModule?e:{default:e}}return function(){return e.default.createElement("div",null,e.default.createElement(t.default,{disable:!0,style:{height:100,border:"1px solid #d5d5d5",borderRadius:3}},e.default.createElement("div",{style:{maxWidth:100,backgroundColor:"#eaeaea"}},"Left Pane"),e.default.createElement(t.default,{disable:!0,mode:"vertical"},e.default.createElement("div",null,"Top Pane"),e.default.createElement("div",null,"Bottom Pane")),e.default.createElement("div",{style:{flex:1}},"Right Pane")),e.default.createElement(t.default,{disable:[4,5],style:{height:100,border:"1px solid #d5d5d5",borderRadius:3,marginTop:10}},e.default.createElement("div",{style:{maxWidth:50,backgroundColor:"#eaeaea"}},"Pane 1"),e.default.createElement("div",{style:{maxWidth:60}},"Pane 2"),e.default.createElement("div",null,"Pane 3"),e.default.createElement("div",null,"Pane 4"),e.default.createElement("div",{style:{flex:1}},"Pane 5")))}}(),227: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)),i=a(n(2656)),r=n(7937);function a(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){d(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function d(e,t,n){return(t=c(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){if(n=e,!(null!=(i=t)&&"undefined"!==typeof Symbol&&i[Symbol.hasInstance]?i[Symbol.hasInstance](n):n instanceof i))throw new TypeError("Cannot call a class as a function");var n,i}function u(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,c(i.key),i)}}function c(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var r=i.call(t,n||"default");if("object"!==e(r))return r;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 f(e,t){return f=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},f(e,t)}function p(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 i,r=m(t);if(n){var a=m(this).constructor;i=Reflect.construct(r,arguments,a)}else i=r.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,i)}}function m(e){return m=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},m(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&&f(e,t)}(c,e);var n,a,o,d=p(c);function c(e){var t;return s(this,c),(t=d.call(this,e)).state={width:210},t}return n=c,(a=[{key:"onClick",value:function(){this.setState({width:0===this.state.width?210:0})}},{key:"render",value:function(){var e={lineHeight:0};return 0===this.state.width?e.width="0%":e.width=this.state.width,t.default.createElement(t.default.Fragment,null,t.default.createElement("div",{style:{marginBottom:10}},t.default.createElement(r.Button,{type:"primary",onClick:this.onClick.bind(this)},0===this.state.width?"\u9690\u85cf\u83dc\u5355":"\u5c55\u793a\u83dc\u5355")),t.default.createElement(i.default,{lineBar:!0,visiable:0!==this.state.width,style:{border:"1px solid #d5d5d5",borderRadius:3}},t.default.createElement("div",{style:l(l({},e),{},{overflow:"hidden"})},t.default.createElement(r.Menu,null,t.default.createElement(r.Menu.Item,{icon:"heart-on",text:"\u53e6\u5b58\u4e3a",active:!0}),t.default.createElement(r.Menu.Item,{icon:"appstore",text:"\u5e94\u7528\u5546\u57ce"}),t.default.createElement(r.Menu.Item,{icon:"bar-chart",text:"\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa"}),t.default.createElement(r.Menu.Item,{icon:"setting",text:"\u504f\u597d\u8bbe\u7f6e"}),t.default.createElement(r.Menu.Divider,null),t.default.createElement(r.Menu.Item,{icon:"map",text:"\u8c37\u6b4c\u5730\u56fe"}))),t.default.createElement("div",{style:{flex:1,minWidth:30}},"Right Pane")))}}])&&u(n.prototype,a),o&&u(n,o),Object.defineProperty(n,"prototype",{writable:!1}),c}(t.default.Component)}(),280:function(){var e=r(n(8573)),t=r(n(2656)),i=["onMouseDown"];function r(e){return e&&e.__esModule?e:{default:e}}function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},a.apply(this,arguments)}function o(e,t){if(null==e)return{};var n,i,r=function(e,t){if(null==e)return{};var n,i,r={},a=Object.keys(e);for(i=0;i<a.length;i++)n=a[i],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i<a.length;i++)n=a[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}return function(){return e.default.createElement("div",null,e.default.createElement(t.default,{renderBar:function(t){var n=t.onMouseDown,r=o(t,i);return e.default.createElement("div",a({},r,{style:{boxShadow:"none",background:"transparent"}}),e.default.createElement("div",{onMouseDown:n,style:{backgroundColor:"#ff000057",boxShadow:"none"}}))},style:{height:100,border:"1px solid #d5d5d5",borderRadius:3}},e.default.createElement("div",{style:{minWidth:60}},"test"),e.default.createElement("div",{style:{minWidth:80,flex:1}},"Right Pane")))}}()},data:{32:{name:32,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    style: {\n      height: 100,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      width: \'20%\',\n      minWidth: 30\n    }\n  }, /*#__PURE__*/_react["default"].createElement("iframe", {\n    srcDoc: "<div>test</div>",\n    style: {\n      width: \'100%\',\n      height: \'100%\'\n    },\n    title: "Code Preview",\n    sandbox: "allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts"\n  })), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      width: \'80%\',\n      minWidth: 100\n    }\n  }, "Right Pane")), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    style: {\n      height: 100,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minWidth: 60\n    }\n  }, "test"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minWidth: 80,\n      flex: 1\n    }\n  }, "Right Pane")));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <div>\n    <Split style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n      <div style={{ width: '20%', minWidth: 30 }}>\n        <iframe\n          srcDoc=\"<div>test</div>\"\n          style={{ width: '100%', height: '100%' }}\n          title=\"Code Preview\"\n          sandbox=\"allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts\"\n        />\n      </div>\n      <div style={{ width: '80%', minWidth: 100 }}>Right Pane</div>\n    </Split>\n    <Split style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n      <div style={{ minWidth: 60 }}>test</div>\n      <div style={{ minWidth: 80, flex: 1 }}>Right Pane</div>\n    </Split>\n  </div>\n);\nexport default Demo;"},62:{name:62,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    mode: "vertical",\n    visiable: false\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minHeight: 45,\n      background: \'#dcdcdc\'\n    }\n  }, "Header"), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    visiable: false\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minWidth: 200,\n      maxWidth: 200,\n      minHeight: 120,\n      background: \'#b5b5b5\'\n    }\n  }, "Sider"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      width: \'100%\',\n      background: \'#ececec\'\n    }\n  }, "Content")), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minHeight: 45,\n      background: \'#dcdcdc\'\n    }\n  }, "Footer")), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: 20\n    }\n  }), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    visiable: false\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minWidth: 200,\n      maxWidth: 200,\n      minHeight: 85,\n      background: \'#a9a9a9\'\n    }\n  }, "Sider"), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    mode: "vertical",\n    visiable: false,\n    style: {\n      width: \'100%\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minHeight: 45,\n      background: \'#dcdcdc\'\n    }\n  }, "Header"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minHeight: 85,\n      background: \'#b5b5b5\'\n    }\n  }, "Content"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minHeight: 45,\n      background: \'#dcdcdc\'\n    }\n  }, "Footer"))));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <div>\n    <Split mode=\"vertical\" visiable={false}>\n      <div style={{ minHeight: 45, background: '#dcdcdc' }}>Header</div>\n      <Split visiable={false}>\n        <div style={{ minWidth: 200, maxWidth: 200, minHeight: 120, background: '#b5b5b5' }}>Sider</div>\n        <div style={{ width: '100%', background: '#ececec' }}>Content</div>\n      </Split>\n      <div style={{ minHeight: 45, background: '#dcdcdc' }}>Footer</div>\n    </Split>\n    <div style={{ height: 20 }}></div>\n    <Split visiable={false}>\n      <div style={{ minWidth: 200, maxWidth: 200, minHeight: 85, background: '#a9a9a9' }}>Sider</div>\n      <Split mode=\"vertical\" visiable={false} style={{ width: '100%' }}>\n        <div style={{ minHeight: 45, background: '#dcdcdc' }}>Header</div>\n        <div style={{ minHeight: 85, background: '#b5b5b5' }}>Content</div>\n        <div style={{ minHeight: 45, background: '#dcdcdc' }}>Footer</div>\n      </Split>\n    </Split>\n  </div>\n);\nexport default Demo;"},92:{name:92,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    style: {\n      height: 100,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", null, "Left Pane"), /*#__PURE__*/_react["default"].createElement("div", null, "Center Pane"), /*#__PURE__*/_react["default"].createElement("div", null, "Center Pane"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      flex: 1\n    }\n  }, "Right Pane"));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <Split style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n    <div>Left Pane</div>\n    <div>Center Pane</div>\n    <div>Center Pane</div>\n    <div style={{ flex: 1 }}>Right Pane</div>\n  </Split>\n);\nexport default Demo;"},109:{name:109,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    lineBar: true,\n    style: {\n      height: 100,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", null, "Left Pane"), /*#__PURE__*/_react["default"].createElement("div", null, "Center Pane"), /*#__PURE__*/_react["default"].createElement("div", null, "Center Pane"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      flex: 1\n    }\n  }, "Right Pane")), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    mode: "vertical",\n    lineBar: true,\n    style: {\n      height: 210,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3,\n      marginTop: 10\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'33.3%\'\n    }\n  }, "Left Pane"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'33.3%\'\n    }\n  }, "Center Pane"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      flex: 1\n    }\n  }, "Right Pane")));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <div>\n    <Split lineBar style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n      <div>Left Pane</div>\n      <div>Center Pane</div>\n      <div>Center Pane</div>\n      <div style={{ flex: 1 }}>Right Pane</div>\n    </Split>\n    <Split mode=\"vertical\" lineBar style={{ height: 210, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}>\n      <div style={{ height: '33.3%' }}>Left Pane</div>\n      <div style={{ height: '33.3%' }}>Center Pane</div>\n      <div style={{ flex: 1 }}>Right Pane</div>\n    </Split>\n  </div>\n);\nexport default Demo;"},133:{name:133,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    mode: "vertical",\n    style: {\n      height: 200,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'50%\'\n    }\n  }, "Top Pane"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'50%\'\n    }\n  }, "Bottom Pane"));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <Split mode=\"vertical\" style={{ height: 200, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n    <div style={{ height: '50%' }}>Top Pane</div>\n    <div style={{ height: '50%' }}>Bottom Pane</div>\n  </Split>\n);\nexport default Demo;"},148:{name:148,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    style: {\n      height: 200,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    mode: "vertical"\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'50%\'\n    }\n  }, "Top Pane"), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    style: {\n      height: \'50%\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", null, "Left Pane"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      flex: 1\n    }\n  }, "Right Pane"))), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      flex: 1\n    }\n  }, "Right Pane"));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <Split style={{ height: 200, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n    <Split mode=\"vertical\">\n      <div style={{ height: '50%' }}>Top Pane</div>\n      <Split style={{ height: '50%' }}>\n        <div>Left Pane</div>\n        <div style={{ flex: 1 }}>Right Pane</div>\n      </Split>\n    </Split>\n    <div style={{ flex: 1 }}>Right Pane</div>\n  </Split>\n);\nexport default Demo;"},171:{name:171,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    visiable: false,\n    style: {\n      height: 100,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      maxWidth: 100,\n      backgroundColor: \'#eaeaea\'\n    }\n  }, "Left Pane"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      flex: 1\n    }\n  }, "Right Pane")), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    visiable: [4, 5],\n    style: {\n      height: 100,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3,\n      marginTop: 10\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      maxWidth: 50,\n      backgroundColor: \'#eaeaea\'\n    }\n  }, "Pane 1"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      maxWidth: 60\n    }\n  }, "Pane 2"), /*#__PURE__*/_react["default"].createElement("div", null, "Pane 3"), /*#__PURE__*/_react["default"].createElement("div", null, "Pane 4"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      flex: 1\n    }\n  }, "Pane 5")));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <div>\n    <Split visiable={false} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n      <div style={{ maxWidth: 100, backgroundColor: '#eaeaea' }}>Left Pane</div>\n      <div style={{ flex: 1 }}>Right Pane</div>\n    </Split>\n    <Split visiable={[4, 5]} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}>\n      <div style={{ maxWidth: 50, backgroundColor: '#eaeaea' }}>Pane 1</div>\n      <div style={{ maxWidth: 60 }}>Pane 2</div>\n      <div>Pane 3</div>\n      <div>Pane 4</div>\n      <div style={{ flex: 1 }}>Pane 5</div>\n    </Split>\n  </div>\n);\nexport default Demo;"},197:{name:197,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    disable: true,\n    style: {\n      height: 100,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      maxWidth: 100,\n      backgroundColor: \'#eaeaea\'\n    }\n  }, "Left Pane"), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    disable: true,\n    mode: "vertical"\n  }, /*#__PURE__*/_react["default"].createElement("div", null, "Top Pane"), /*#__PURE__*/_react["default"].createElement("div", null, "Bottom Pane")), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      flex: 1\n    }\n  }, "Right Pane")), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    disable: [4, 5],\n    style: {\n      height: 100,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3,\n      marginTop: 10\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      maxWidth: 50,\n      backgroundColor: \'#eaeaea\'\n    }\n  }, "Pane 1"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      maxWidth: 60\n    }\n  }, "Pane 2"), /*#__PURE__*/_react["default"].createElement("div", null, "Pane 3"), /*#__PURE__*/_react["default"].createElement("div", null, "Pane 4"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      flex: 1\n    }\n  }, "Pane 5")));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <div>\n    <Split disable style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n      <div style={{ maxWidth: 100, backgroundColor: '#eaeaea' }}>Left Pane</div>\n      <Split disable mode=\"vertical\">\n        <div>Top Pane</div>\n        <div>Bottom Pane</div>\n      </Split>\n      <div style={{ flex: 1 }}>Right Pane</div>\n    </Split>\n    <Split disable={[4, 5]} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}>\n      <div style={{ maxWidth: 50, backgroundColor: '#eaeaea' }}>Pane 1</div>\n      <div style={{ maxWidth: 60 }}>Pane 2</div>\n      <div>Pane 3</div>\n      <div>Pane 4</div>\n      <div style={{ flex: 1 }}>Pane 5</div>\n    </Split>\n  </div>\n);\nexport default Demo;"},227:{name:227,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\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 _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\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 _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nvar Demo = /*#__PURE__*/function (_React$Component) {\n  _inherits(Demo, _React$Component);\n  var _super = _createSuper(Demo);\n  function Demo(props) {\n    var _this;\n    _classCallCheck(this, Demo);\n    _this = _super.call(this, props);\n    _this.state = {\n      width: 210\n    };\n    return _this;\n  }\n  _createClass(Demo, [{\n    key: "onClick",\n    value: function onClick() {\n      this.setState({\n        width: this.state.width === 0 ? 210 : 0\n      });\n    }\n  }, {\n    key: "render",\n    value: function render() {\n      var styl = {\n        lineHeight: 0\n      };\n      if (this.state.width === 0) {\n        styl.width = "0%";\n      } else {\n        styl.width = this.state.width;\n      }\n      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {\n        style: {\n          marginBottom: 10\n        }\n      }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n        type: "primary",\n        onClick: this.onClick.bind(this)\n      }, this.state.width === 0 ? \'\u9690\u85cf\u83dc\u5355\' : \'\u5c55\u793a\u83dc\u5355\')), /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n        lineBar: true,\n        visiable: this.state.width !== 0,\n        style: {\n          border: \'1px solid #d5d5d5\',\n          borderRadius: 3\n        }\n      }, /*#__PURE__*/_react["default"].createElement("div", {\n        style: _objectSpread(_objectSpread({}, styl), {}, {\n          overflow: \'hidden\'\n        })\n      }, /*#__PURE__*/_react["default"].createElement(_uiw.Menu, null, /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n        icon: "heart-on",\n        text: "\\u53E6\\u5B58\\u4E3A",\n        active: true\n      }), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n        icon: "appstore",\n        text: "\\u5E94\\u7528\\u5546\\u57CE"\n      }), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n        icon: "bar-chart",\n        text: "\\u6708\\u7EDF\\u8BA1\\u62A5\\u8868\\u5BFC\\u51FA"\n      }), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n        icon: "setting",\n        text: "\\u504F\\u597D\\u8BBE\\u7F6E"\n      }), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Divider, null), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n        icon: "map",\n        text: "\\u8C37\\u6B4C\\u5730\\u56FE"\n      }))), /*#__PURE__*/_react["default"].createElement("div", {\n        style: {\n          flex: 1,\n          minWidth: 30\n        }\n      }, "Right Pane")));\n    }\n  }]);\n  return Demo;\n}(_react["default"].Component);\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport Split from \'@uiw/react-split\';\nimport { Menu, Button } from \'uiw\';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      width: 210,\n    };\n  }\n  onClick() {\n    this.setState({\n      width: this.state.width === 0 ? 210 : 0,\n    });\n  }\n  render() {\n    const styl = { lineHeight: 0 };\n    if (this.state.width === 0) {\n      styl.width = `0%`;\n    } else {\n      styl.width = this.state.width;\n    }\n    return (\n      <>\n        <div style={{ marginBottom: 10 }}>\n          <Button type="primary" onClick={this.onClick.bind(this)}>\n            {this.state.width === 0 ? \'\u9690\u85cf\u83dc\u5355\' : \'\u5c55\u793a\u83dc\u5355\'}\n          </Button>\n        </div>\n        <Split lineBar visiable={this.state.width !== 0} style={{ border: \'1px solid #d5d5d5\', borderRadius: 3 }}>\n          <div style={{ ...styl, overflow: \'hidden\' }}>\n            <Menu>\n              <Menu.Item icon="heart-on" text="\u53e6\u5b58\u4e3a" active />\n              <Menu.Item icon="appstore" text="\u5e94\u7528\u5546\u57ce" />\n              <Menu.Item icon="bar-chart" text="\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa" />\n              <Menu.Item icon="setting" text="\u504f\u597d\u8bbe\u7f6e" />\n              <Menu.Divider />\n              <Menu.Item icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n            </Menu>\n          </div>\n          <div style={{ flex: 1, minWidth: 30 }}>Right Pane</div>\n        </Split>\n      </>\n    );\n  }\n}\nexport default Demo;'},280:{name:280,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _reactSplit = _interopRequireDefault(require("@uiw/react-split"));\nvar _excluded = ["onMouseDown"];\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactSplit["default"], {\n    renderBar: function renderBar(_ref) {\n      var onMouseDown = _ref.onMouseDown,\n        props = _objectWithoutProperties(_ref, _excluded);\n      return /*#__PURE__*/_react["default"].createElement("div", _extends({}, props, {\n        style: {\n          boxShadow: \'none\',\n          background: \'transparent\'\n        }\n      }), /*#__PURE__*/_react["default"].createElement("div", {\n        onMouseDown: onMouseDown,\n        style: {\n          backgroundColor: \'#ff000057\',\n          boxShadow: \'none\'\n        }\n      }));\n    },\n    style: {\n      height: 100,\n      border: \'1px solid #d5d5d5\',\n      borderRadius: 3\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minWidth: 60\n    }\n  }, "test"), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      minWidth: 80,\n      flex: 1\n    }\n  }, "Right Pane")));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <div>\n    <Split\n      renderBar={({ onMouseDown, ...props }) => {\n        return (\n          <div {...props} style={{ boxShadow: 'none', background: 'transparent' }}>\n            <div onMouseDown={onMouseDown} style={{ backgroundColor: '#ff000057', boxShadow: 'none' }} />\n          </div>\n        );\n      }}\n      style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}\n    >\n      <div style={{ minWidth: 60 }}>test</div>\n      <div style={{ minWidth: 80, flex: 1 }}>Right Pane</div>\n    </Split>\n  </div>\n);\nexport default Demo;"}},source:"# Split \u9762\u677f\u5206\u5272\n\n[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-split.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-split)\n[![Build & Deploy](https://github.com/uiwjs/react-split/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-split/actions/workflows/ci.yml)\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-split/file/README.md)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-split.svg)](https://www.npmjs.com/package/@uiw/react-split)\n[![Coverage Status](https://uiwjs.github.io/react-split/badges.svg)](https://uiwjs.github.io/react-split/coverage/lcov-report/)\n[![Open in Gitpod](https://shields.io/badge/Open%20in-Gitpod-green?logo=Gitpod)](https://gitpod.io/#https://github.com/uiwjs/react-split)\n[![Repo Dependents](https://badgen.net/github/dependents-repo/uiwjs/react-split)](https://github.com/uiwjs/react-split/network/dependents)\n\n\u53ef\u5c06\u4e00\u5757\u5185\u5bb9\uff0c\u5206\u5272\u4e3a\u53ef\u4ee5\u62d6\u62fd\u8c03\u6574\u5bbd\u5ea6\u6216\u9ad8\u5ea6\u7684\u533a\u57df\u3002\n\n```jsx\nimport { Split } from 'uiw';\n```\n\n\u4ece\u7ec4\u4ef6\u5e93 `uiw` \u4e2d\u62bd\u79bb\u51fa\u6765\u7684 `@uiw/react-split`\uff0c\u53ef\u4ee5\u5355\u72ec\u4f7f\u7528\u3002\n\n```jsx\nimport Split from '@uiw/react-split';\n```\n\n### \u57fa\u7840\u7528\u6cd5\n\n> ~~\u901a\u8fc7\u8bbe\u7f6e\u5b50\u8282\u70b9\u7684 `minWidth` \u6837\u5f0f\uff0c\u5373\u53ef\u8bbe\u7f6e\u62d6\u62fd\u6700\u5c0f\u5bbd\u5ea6\u503c\u3002\u901a\u8fc7\u8bbe\u7f6e\u5b50\u8282\u70b9\u6837\u5f0f `flexBasis` \u6837\u5f0f\u5373\u53ef\u8bbe\u7f6e\u9ed8\u8ba4\u5206\u5272\u5185\u5bb9\u7684\u5360\u6bd4\u5bbd\u5ea6\u3002~~\n\n- \u56fa\u5b9a\u521d\u59cb\u5bbd\u5ea6\u6216\u8005\u9ad8\u5ea6\uff0c\u53ef\u901a\u8fc7\u8bbe\u7f6e\u5b50\u8282\u70b9\uff0c\u6837\u5f0f `width: '80%'` \u5bbd\u5ea6\u767e\u5206\u767e\u6765\u8ba1\u7b97\u3002\n- \u62d6\u62fd\u81f3\u6700\u5c0f\u5bbd\u5ea6\uff0c\u53ef\u901a\u8fc7\u8bbe\u7f6e\u5b50\u8282\u70b9\u6837\u5f0f `minWidth: 30`\uff0c\u6765\u8fbe\u5230\u6548\u679c\n- \u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u4e0d\u8bbe\u7f6e\u6837\u5f0f `width`\uff0c\u9700\u8981\u5c06\u67d0\u4e2a\u5b50\u8282\u70b9\u6837\u5f0f\u8bbe\u4e3a `flex: 1`\uff0c\u6765\u81ea\u9002\u5e94\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () => (\n  <div>\n    <Split style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>\n      <div style={{ width: '20%', minWidth: 30 }}>\n        <iframe\n          srcDoc=\"<div>test</div>\"\n          style={{ width: '100%', height: '100%' }}\n          title=\"Code Preview\"\n          sandbox=\"allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts\"\n        />\n      </div>\n      <div style={{ width: '80%', minWidth: 100 }}>Right Pane</div>\n    </Split>\n    <Split style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: