Renderless Svelte

TabControl

This component offers an easy way to create tab controls. It consists of two parts: the TabControl itself and TabControlItems.

The TabControl

The TabControl is the container for the TabControlItem and exposes a slot named ‘tabs’ that can be used to render the actual controls themselves. The tabs header comes with an exported property ‘tabs’ that has the details for each tab. The tabs are identified by a property id that has to be unique. There is also an exported function setTab that allows for programmatically changing the tab by passing it’s id.

Each tab object itself comes with the following properties

<script>
    import { TabControl } from 'renderless-svelte'
</script>

<TabControl>
    <div slot="tabs" let:tabs>        
        {#each tabs as { active, id, payload, select }}
            <button class:active on:click="{select}">{payload}</button>
        {/each}
    </div>

    <!-- here come the TabControlItems -->
</TabControl>

The TabControlItem

This component creates an item in the TabControl, it will simply wrap a slot that is conditionally rendered based on the currently selected tab. It takes two attributes

Example