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!
Features
- pass the layout (
config
) via props - render tab content via the default slot;
let:id
,let:componentType
, andlet: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:
# from NPM
npm i svelte-golden-layout
For development, clone the repo and add the dependency as shown:
# 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
You can 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.
In the less complete example below, svelte:component
is used to select a specific component for each tab, and the componentState
object is passed as props to that component:
<script lang="ts">
import type { LayoutConfig } from 'golden-layout';
import 'svelte-golden-layout/css/themes/goldenlayout-light-theme.css';
import GoldenLayout from 'svelte-golden-layout';
// ... import a Test component
const components = { Test };
const layout: LayoutConfig = {
root: {
type: 'row',
content: [
{
type: 'component',
componentType: 'Test',
componentState: {
someProp: 1,
anotherProp: 1,
}
},
{
type: 'component',
componentType: 'Test',
},
],
},
};
</script>
<div class="layout-container">
<GoldenLayout config={layout} let:componentType let:componentState>
<svelte:component this={components[componentType]} {...componentState} />
</GoldenLayout>
</div>
<style>
.layout-container {
width: 800px;
height: 600px;
margin: 150px auto;
border: 1px solid black;
}
</style>