GoldenLayout 2.x Wrapper for Svelte
npm install svelte-golden-layoutGoldenLayout 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!
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
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:
`shclone this repo and package the library
git clone https://github.com/SillyFreak/svelte-golden-layout
cd svelte-golden-layout
npm i
npm run 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.