https://github.com/milahu/solidjs-resizable-splitter-component
resizable splitter component for SolidJS
https://github.com/milahu/solidjs-resizable-splitter-component
component layout resizable solid-js solidjs splitter
Last synced: 10 months ago
JSON representation
resizable splitter component for SolidJS
- Host: GitHub
- URL: https://github.com/milahu/solidjs-resizable-splitter-component
- Owner: milahu
- License: mit
- Created: 2021-11-17T11:19:41.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-06-12T07:48:02.000Z (over 1 year ago)
- Last Synced: 2025-03-30T10:11:17.145Z (11 months ago)
- Topics: component, layout, resizable, solid-js, solidjs, splitter
- Language: JavaScript
- Homepage: https://milahu.github.io/solidjs-resizable-splitter-component/
- Size: 127 KB
- Stars: 5
- Watchers: 2
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: readme.md
- License: license.txt
Awesome Lists containing this project
README
# solidjs-resizable-splitter-component
A component that allows splitting an area into multiple horizontal or vertical resizable panels.
## Status
:warning: deprecated in favor of
- [solid-dockview](https://github.com/lyonbot/solid-dockview) - solidjs wrapper for [dockview](https://github.com/mathuo/dockview)
- [dockview](https://github.com/mathuo/dockview) - Layout Manager in javascript. tabs, groups, grids, splitviews
- [split](https://github.com/nathancahill/split) - utilities for resizeable split views
- [areas](https://github.com/bimdata/areas) - A Vue.js Blender style area manager to create custom layouts
## Demo
See a [live demo](https://milahu.github.io/solidjs-resizable-splitter-component/).
To run the demo locally,
```sh
npm install
npm run demo
```
## Install
Not currently published to NPM, install from git for now by adding the following to your `dependencies` in `package.json`:
```json
"dependencies": {
"solidjs-resizable-splitter-component": "github:milahu/solidjs-resizable-splitter-component"
}
```
or run
```sh
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](https://webpack.js.org/) with
[Babel](https://babeljs.io/)) to compile JSX files in
`node_modules/solidjs-resizable-splitter-component` because those files are not
plain JavaScript.
## Usage
Make a split and resizeable layout by importing the `SlitX` and `SplitY`
components from the lib and using them in your markup:
```jsx
import {SplitY, SplitX} from 'solidjs-resizable-splitter-component'
export function App(props) {
return (
Y1 X1
Y1 X2 Y1
Y1 X2 Y2
Y1 X2 Y3
Y2
)
}
```
## Related
* based on https://github.com/milahu/svelte-layout-resizable