import{Split}from'uiw';

importSplitfrom'@uiw/react-split';

importReactfrom'react';importSplitfrom'@uiw/react-split';constDemo=()=>(<div><Splitstyle={{height:100,border:'1px solid #d5d5d5',borderRadius:3}}><divstyle={{width:'20%',minWidth:30}}><iframesrcDoc="<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"/></div><divstyle={{width:'80%',minWidth:100}}>Right Pane</div></Split><Splitstyle={{height:100,border:'1px solid #d5d5d5',borderRadius:3}}><divstyle={{minWidth:60}}>test</div><divstyle={{minWidth:80,flex:1}}>Right Pane</div></Split></div>);exportdefaultDemo;

importReactfrom'react';importSplitfrom'@uiw/react-split';constDemo=()=>(<div><Splitmode="vertical"visible={false}><divstyle={{minHeight:45,background:'#dcdcdc'}}>Header</div><Splitvisible={false}><divstyle={{minWidth:200,maxWidth:200,minHeight:120,background:'#b5b5b5'}}>Sider</div><divstyle={{width:'100%',background:'#ececec'}}>Content</div></Split><divstyle={{minHeight:45,background:'#dcdcdc'}}>Footer</div></Split><divstyle={{height:20}}></div><Splitvisible={false}><divstyle={{minWidth:200,maxWidth:200,minHeight:85,background:'#a9a9a9'}}>Sider</div><Splitmode="vertical"visible={false}style={{width:'100%'}}><divstyle={{minHeight:45,background:'#dcdcdc'}}>Header</div><divstyle={{minHeight:85,background:'#b5b5b5'}}>Content</div><divstyle={{minHeight:45,background:'#dcdcdc'}}>Footer</div></Split></Split></div>);exportdefaultDemo;

importReactfrom'react';importSplitfrom'@uiw/react-split';constDemo=()=>(<Splitstyle={{height:100,border:'1px solid #d5d5d5',borderRadius:3}}><div>Left Pane</div><div>Center Pane</div><div>Center Pane</div><divstyle={{flex:1}}>Right Pane</div></Split>);exportdefaultDemo;

importReactfrom'react';importSplitfrom'@uiw/react-split';constDemo=()=>(<div><SplitlineBarstyle={{height:100,border:'1px solid #d5d5d5',borderRadius:3}}><div>Left Pane</div><div>Center Pane</div><div>Center Pane</div><divstyle={{flex:1}}>Right Pane</div></Split><Splitmode="vertical"lineBarstyle={{height:210,border:'1px solid #d5d5d5',borderRadius:3,marginTop:10}}><divstyle={{height:'33.3%'}}>Left Pane</div><divstyle={{height:'33.3%'}}>Center Pane</div><divstyle={{flex:1}}>Right Pane</div></Split></div>);exportdefaultDemo;

importReactfrom'react';importSplitfrom'@uiw/react-split';constDemo=()=>(<Splitmode="vertical"style={{height:200,border:'1px solid #d5d5d5',borderRadius:3}}><divstyle={{height:'50%'}}>Top Pane</div><divstyle={{height:'50%'}}>Bottom Pane</div></Split>);exportdefaultDemo;

importReactfrom'react';importSplitfrom'@uiw/react-split';constDemo=()=>(<Splitstyle={{height:200,border:'1px solid #d5d5d5',borderRadius:3}}><Splitmode="vertical"><divstyle={{height:'50%'}}>Top Pane</div><Splitstyle={{height:'50%'}}><div>Left Pane</div><divstyle={{flex:1}}>Right Pane</div></Split></Split><divstyle={{flex:1}}>Right Pane</div></Split>);exportdefaultDemo;

importReactfrom'react';importSplitfrom'@uiw/react-split';constDemo=()=>(<div><Splitvisiable={false}style={{height:100,border:'1px solid #d5d5d5',borderRadius:3}}><divstyle={{maxWidth:100,backgroundColor:'#eaeaea'}}>Left Pane</div><divstyle={{flex:1}}>Right Pane</div></Split><Splitvisiable={[4,5]}style={{height:100,border:'1px solid #d5d5d5',borderRadius:3,marginTop:10}}><divstyle={{maxWidth:50,backgroundColor:'#eaeaea'}}>Pane 1</div><divstyle={{maxWidth:60}}>Pane 2</div><div>Pane 3</div><div>Pane 4</div><divstyle={{flex:1}}>Pane 5</div></Split></div>);exportdefaultDemo;

importReactfrom'react';importSplitfrom'@uiw/react-split';constDemo=()=>(<div><Splitdisablestyle={{height:100,border:'1px solid #d5d5d5',borderRadius:3}}><divstyle={{maxWidth:100,backgroundColor:'#eaeaea'}}>Left Pane</div><Splitdisablemode="vertical"><div>Top Pane</div><div>Bottom Pane</div></Split><divstyle={{flex:1}}>Right Pane</div></Split><Splitdisable={[4,5]}style={{height:100,border:'1px solid #d5d5d5',borderRadius:3,marginTop:10}}><divstyle={{maxWidth:50,backgroundColor:'#eaeaea'}}>Pane 1</div><divstyle={{maxWidth:60}}>Pane 2</div><div>Pane 3</div><div>Pane 4</div><divstyle={{flex:1}}>Pane 5</div></Split></div>);exportdefaultDemo;

importReactfrom'react';importSplitfrom'@uiw/react-split';import{Menu,Button}from'uiw';classDemoextendsReact.Component{constructor(props){super(props);this.state={width:210,};}onClick(){this.setState({width:this.state.width===0 ?210 :0,});}render(){conststyl={lineHeight:0};if(this.state.width===0){styl.width=`0%`;}else{styl.width=this.state.width;}return(<><divstyle={{marginBottom:10}}><Buttontype="primary"onClick={this.onClick.bind(this)}>{this.state.width===0 ?'隐藏菜单' :'展示菜单'}</Button></div><SplitlineBarvisiable={this.state.width!==0}style={{border:'1px solid #d5d5d5',borderRadius:3}}><divstyle={{ ...styl,overflow:'hidden'}}><Menu><Menu.Itemicon="heart-on"text="另存为"active/><Menu.Itemicon="appstore"text="应用商城"/><Menu.Itemicon="bar-chart"text="月统计报表导出"/><Menu.Itemicon="setting"text="偏好设置"/><Menu.Divider/><Menu.Itemicon="map"text="谷歌地图"/></Menu></div><divstyle={{flex:1,minWidth:30}}>Right Pane</div></Split></>);}}exportdefaultDemo;

importReactfrom'react';importSplitfrom'@uiw/react-split';constDemo=()=>(<div><SplitrenderBar={({ onMouseDown, ...props})=>{return(<div{...props}style={{boxShadow:'none',background:'transparent'}}><divonMouseDown={onMouseDown}style={{backgroundColor:'#ff000057',boxShadow:'none'}}/></div>);}}style={{height:100,border:'1px solid #d5d5d5',borderRadius:3}}><divstyle={{minWidth:60}}>test</div><divstyle={{minWidth:80,flex:1}}>Right Pane</div></Split></div>);exportdefaultDemo;

exportinterfaceSplitPropsextendsOmit<React.HTMLAttributes<HTMLDivElement>,'onDragEnd'>{style?:React.CSSProperties;className?:string;prefixCls?:string;/**   * Drag width/height change callback function,   * the width or height is determined according to the mode parameter   */onDragging?:(preSize:number,nextSize:number,paneNumber:number)=>void;/** Callback function for dragging end */onDragEnd?:(preSize:number,nextSize:number,paneNumber:number)=>void;/** Support custom drag and drop toolbar */renderBar?:(props:React.HTMLAttributes<HTMLDivElement>)=>JSX.Element;/** Set the drag and drop toolbar as a line style. */lineBar?:boolean;/** Set the dragged toolbar, whether it is visible or not */visible?:boolean|number[];/**   *@deprecated Use `visible` instead   */visiable?:boolean|number[];/**   * Set the drag and drop toolbar, disable   */disable?:boolean|number[];/**   * type, optional `horizontal` or `vertical`   */mode?:'horizontal'|'vertical';}

# Step 1, run first, listen to the component compile and output the .js filenpm run watchnpm run build# Step 2, development mode, listen to compile preview website instancenpm run doc

npm run released