https://github.com/milahu/svelte-layout-resizable
resizable layout component for svelte
https://github.com/milahu/svelte-layout-resizable
layout splitter svelte svelte-component svelte-components sveltejs vanillajs
Last synced: 4 months ago
JSON representation
resizable layout component for svelte
- Host: GitHub
- URL: https://github.com/milahu/svelte-layout-resizable
- Owner: milahu
- License: cc0-1.0
- Created: 2020-08-28T09:17:11.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-11-06T10:32:51.000Z (about 3 years ago)
- Last Synced: 2025-08-10T00:18:52.331Z (4 months ago)
- Topics: layout, splitter, svelte, svelte-component, svelte-components, sveltejs, vanillajs
- Language: Svelte
- Homepage: https://milahu.github.io/svelte-layout-resizable/demo/demo.html
- Size: 53.7 KB
- Stars: 28
- Watchers: 3
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-layout-resizable
resizable layout component for svelte
[live demo](https://milahu.github.io/svelte-layout-resizable/demo/demo.html)
## status
:warning: deprecated in favor of
- [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
## usage
in your `App.svelte` add
```html
import L from 'svelte-layout-resizable';
cell 1 in row
cell 2.1 in column
cell 2.2 in column
cell 2.3 in column
cell 3 in row
```
result:
`` is a broad container with css `flex-direction: row`
`` is a tall container with css `flex-direction: column`
if you dont like the `` syntax
you can do `import Layout from 'svelte-layout-resizable';`
and use `cell`
## style
the component defines only a minimal style
to implement containers and resize-handles
most users want to add style to their `App.svelte`, like
```html
/* layout */
:global(body) {
/* use full window size */
padding: 0;
}
:global(.layout-cell>.middle>.center) {
/* content cell: add scrollbars when needed */
overflow: auto;
}
:global(.layout-cell>*>.frame) {
/* frame color and border */
/*background-color: #f4f4f4;*/
border: solid 0.5px #a8a8a8;
}
:global(.layout-cell>*, .layout-cell>*>.frame) {
/* frame size
larger frames are better acccessible (touchscreen) */
flex-basis: 2.5px !important;
}
/* use css classes on cells like
<L class="overflow-hidden">....</L> */
:global(.layout-cell>.middle>.center.overflow-hidden) {
overflow: hidden !important;
}
/* use css classes on containers like
<L row class="custom-row-container">....</L> */
:global(.layout-row.custom-row-container) {
color: orange;
}
```
## related
* [goldenlayout.js](https://golden-layout.com/) (RIP jQuery)
* [svelte-subdivide](https://github.com/sveltejs/svelte-subdivide) [[v3](https://github.com/saabi/svelte-subdivide/tree/v3)]
* [svelte-grid](https://github.com/vaheqelyan/svelte-grid)
* [other svelte layout components](https://sveltesociety.dev/components/) in sveltesociety → tag: layout and structure
* [solidjs-resizable-splitter-component](https://github.com/milahu/solidjs-resizable-splitter-component) port of this library for the solidjs framework
## todo
* avoid changing body style?
only 'stop selecting text' in layout containers?
* fix resize bug with many cells
like a 3x3 layout
in the center container
* fix newStyle.marginLeft and newStyle.marginTop
* allow to hide/deactivate resize handles
on the outside of a class="root" container
(better: find root container automatically)
* allow resize from corner handles?
* imitate goldenlayout.js and [qt dockable widgets](https://doc.qt.io/qt-5/qtwidgets-mainwindows-dockwidgets-example.html)
maybe as a separate node package, keep it small
* allow to drag/move and dock cells to other containers
* allow to expand one cell over the root layout
* add a tab widget? out of scope?
we already have [svelte-tabs](https://github.com/joeattardi/svelte-tabs)
* support 'live resize' of layout
con: need more CPU/GPU = debounce to like 10 FPS
* beforeUpdate or onMount
calculate sizes of all cells
so when we have
```
1
2
```
then cell 2 should have size 0.4
and not what css-flex suggests
based on content size
or did we use flex wrong?
* check bounds on resize
eventually shrink more cells
* verify overflow on resize
avoid unnecessary scrollbars
## license
[license](LICENSE) is creative commons zero 1.0