@uiw/react-split
v5.9.3TypeScript
A piece of content can be divided into areas that can be dragged to adjust the width or height.
0/weekUpdated 2 years agoMITUnpacked: 113.9 KB
Published by Kenny Wong
npm install @uiw/react-splitSplit
A piece of content can be divided into areas that can be dragged to adjust the width or height.
``jsx`
import { Split } from 'uiw';
@uiw/react-split extracted from the component library uiw can be used alone.
`jsx`
import Split from '@uiw/react-split';
$3
> ~~By setting the minWidth style of the child node, you can set the minimum drag width value. By setting the child node style flexBasis style, you can set the proportion width of the default split content.~~
- Fixed initial width or height, which can be calculated by setting the child node, style width: '80%' to 100% width.minWidth: 30
- Drag to the minimum width, you can achieve the effect by setting the child node style .width
- By default, the style is not set, and a child node style needs to be set to flex: 1 to adapt
`jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';
const Demo = () => (
test
"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"
/>
Right Pane
test
Right Pane
);
export default Demo;
`
$3
Setting
disables the drag bar, which can be used for layout.`jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';const Demo = () => (
Header
Sider
Content
Footer
Sider
Header
Content
Footer
);
export default Demo;
`$3
jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';const Demo = () => (
Left Pane
Center Pane
Center Pane
Right Pane
);
export default Demo;
`$3
jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';const Demo = () => (
Left Pane
Center Pane
Center Pane
Right Pane
Left Pane
Center Pane
Right Pane
);
export default Demo;
`$3
jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';const Demo = () => (
Top Pane
Bottom Pane
);
export default Demo;
`$3
jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';const Demo = () => (
Top Pane
Left Pane
Right Pane
Right Pane
);
export default Demo;
`$3
The following example sets whether the drag tool is visible by setting the value of
.`jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';const Demo = () => (
Left Pane
Right Pane
Pane 1
Pane 2
Pane 3
Pane 4
Pane 5
);
export default Demo;
`$3
Disable drag tool dragging by setting the value of
.`jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';const Demo = () => (
Left Pane
Top Pane
Bottom Pane
Right Pane
Pane 1
Pane 2
Pane 3
Pane 4
Pane 5
);
export default Demo;
`$3
Draggable left column width.
jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';
import { Menu, Button } from 'uiw';class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
width: 210,
};
}
onClick() {
this.setState({
width: this.state.width === 0 ? 210 : 0,
});
}
render() {
const styl = { lineHeight: 0 };
if (this.state.width === 0) {
styl.width =
0%;
} else {
styl.width = this.state.width;
}
return (
<>
Right Pane
);
}
}
export default Demo;
`$3
jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';const Demo = () => (
return (
);
}}
style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}
>
test
Right Pane
);
export default Demo;
`Props
ts
export interface SplitProps extends Omit, '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) => 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';
}
Development
Runs the project in development mode.
bash
Step 1, run first, listen to the component compile and output the .js file
npm run watch
npm run build
Step 2, development mode, listen to compile preview website instance
npm run doc
`production
Builds the app for production to the build folder.
bash
npm run released
``The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
Contributors
As always, thanks to our amazing contributors!
Made with contributors.
$3
Licensed under the MIT License.