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:

# 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

simple example

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 'svelte-golden-layout/css/themes/goldenlayout-light-theme.css';

    import GoldenLayout from 'svelte-golden-layout';
    // ... import a Test component

    const components = { Test };

    const layout = {
        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>