Tabs

Tabs enable quick switch between different views.

Add a container element with the tab class. And add child elements with the tab-item class. You can add the tab-block class for a full-width tab. The tab-item or its child with the active class will be highlighted.

<script>
    import { Tabs } from 'svelte-spectre'

    let items = [
            { title: 'Tab1', path: '#', clear: true },
            { title: 'Tab2', path: '#1', badge: '0' },
            { title: 'Tab3', path: '#2' },
        ]
</script>

<Tabs {items}>

Badge

<script>
    import { Tabs } from 'svelte-spectre'

    let items = [
            { title: 'Tab1', path: '#', clear: true },
            { title: 'Tab2', path: '#1', badge: '0' },
            { title: 'Tab3', path: '#2' },
        ]
</script>

<Tabs {items}>

Action

You could add a search box or buttons inside a tab. Add the tab-action class to the tab-item.

<Tabs {items}>
    <div slot="action" class="input-group input-inline">
        <input class="form-input input-sm" type="text">
        <button class="btn btn-primary btn-sm input-group-btn">Search</button>
    </div>
</Tabs>