A component that allows splitting an area into multiple horizontal or vertical resizable panels.
- solid-dockview - solidjs wrapper for dockview
- dockview - Layout Manager in javascript. tabs, groups, grids, splitviews
- split - utilities for resizeable split views
- areas - A Vue.js Blender style area manager to create custom layouts
See a live demo.
To run the demo locally,
npm install
npm run demoNot currently published to NPM, install from git for now by adding the following to your dependencies in package.json:
"dependencies": {
"solidjs-resizable-splitter-component": "github:milahu/solidjs-resizable-splitter-component"
}or run
npm install "solidjs-resizable-splitter-component@github:milahu/solidjs-resizable-splitter-component"If you fork the repo, you can replace milahu with your own GitHub username to
install the lib from your fork.
Note that the source file is a .jsx file. If you import it in a Vite project,
that will be fine because Vite will know how to compile it, but otherwise you
may need to configure your tool (f.e. Webpack with
Babel) to compile JSX files in
node_modules/solidjs-resizable-splitter-component because those files are not
plain JavaScript.
Make a split and resizeable layout by importing the SlitX and SplitY
components from the lib and using them in your markup:
import {SplitY, SplitX} from 'solidjs-resizable-splitter-component'
export function App(props) {
return (
<div style="width: 100%; height: 100%">
<SplitY>
<SplitX>
<div>Y1 X1</div>
<SplitY>
<div>Y1 X2 Y1</div>
<div>Y1 X2 Y2</div>
<div>Y1 X2 Y3</div>
</SplitY>
</SplitX>
<div>Y2</div>
</SplitY>
</div>
)
}