Tabs

Svelte Component

Use tabs to quickly switch between different views.

@skeletonlabs/skeleton
Source Code
View Page Source
Accessibility Reference

Examples

Examples

Content A
Content A

Books

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Getting Started

typescript 
import { writable, type Writable } from 'svelte/store';
typescript 
const storeTab: Writable<string> = writable('a');
html 
<TabGroup selected={storeTab}>
	<Tab value="a">(labelA)</Tab>
	<Tab value="b">(labelB)</Tab>
</TabGroup>

<!-- Conditionally display content -->
{#if $storeTab === 'a'}Content A{/if}
{#if $storeTab === 'b'}Content B{/if}