Tabs

Use tabs to quickly switch between different views.

javascript 
import { TabGroup, Tab } from '@brainandbones/skeleton';

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.

Usage

typescript 
import { writable, type Writable } from "svelte/store";

let storeTab: Writable<string> = writable('a');
html 
<TabGroup selected={storeTab} justify="justify-start md:justify-center" highlight="border-accent-500" color="text-accent-500">
    <Tab value="a">Tab A</Tab>
    <Tab value="b">
        <svelte:fragment>{@html icon}</svelte:fragment>
        <span>Tab B</span>
    </Tab>
</TabGroup>
html 
<!-- Conditionally display content -->
{#if $storeTab === 'a'}Content A{/if}
{#if $storeTab === 'b'}Content B{/if}

Properties

Tab Group

Prop Type Default Required Description
selectedWritable-✓A svelte store to keep track of tab selection.
justifystringjustify-start-Provide classes to set the flex justification. 'justify-start' is best small screens.
borderWidthstringborder-b-2-Provide classes to set the selected border thickness size. Shared between group and tab.
borderColorstringborder-primary-500-Provide classes to set the selected border color.
colorstringtext-primary-500-Provide class to set the selected text color.
fillstringfill-primary-500-Provide classes to set the selected SVG fill color.
hoverstringhover:bg-surface-500/10-Provide classes to set the unselected hover styles.
roundedstringrounded-tl-lg rounded-tr-lg-Provide classes to set the tab border radius styles.

Tab

Prop Type Description
valueanyThe value of each tab.

Slots

Tab

Name Description
leadProvides a leading position, which can be used for icons.

Accessibility

ARIA Guidelines

Tab Group

Prop Type Required Description
labeledbystring-Provide the ID of the element that describes the group.
labelstring-Defines a semantic label for the group.

Tab

Prop Type Required Description
labelstring-Defines a semantic label for the tab.

Keyboard Interactions

Keys Description
TabMoves focus to the next focusable Tab.
Shift + Tab Moves focus to the previous focusable Tab.
HomeMoves focus to the first tab.
EndMoves focus to the last tab.
Space or EnterActivates the tab if it was not activated automatically on focus.