svelte-golden-layout

GoldenLayout 2.x Wrapper for Svelte. The GoldenLayout component accepts child content (i.e. a slot) that renders each tab.

This was extracted from a personal project, so its initial scope was rather limited. Expect rough edges, but bug reports and contributions are welcome!

Live Demo

Features

- pass the layout (config) via props
- render tab content via the default slot; let:id, let:componentType, and let:componentState contain the specific tab's content
- automatic resizing of the layout within its containing HTML element

Known limitations

- changing the layout recreates the whole thing, i.e. new components are created for each tab
- popout of tabs does not work yet
- dragging the tabset dividers results in text selection

Installation & development

This library can be installed from NPM:

``sh


from NPM


npm i svelte-golden-layout
`

For development, clone the repo and add the dependency as shown:

`sh


clone this repo and package the library

git clone https://github.com/SillyFreak/svelte-golden-layout
cd svelte-golden-layout
npm i
npm run package

add it & golden-layout to your own project

cd ../your-own-project
npm i golden-layout ../svelte-golden-layout/package
`

simple example

In this example, svelte:component is used to select a specific component for each tab, and the componentState object is passed as props to that component:

`svelte



``

You can also run this repo as an app (live demo); the example code is in index.svelte and \_Test.svelte, and demonstates both features and shortcomings of the library.