UI Elements

Tabs

A navigation component that organizes content into multiple panels with clickable tabs.

Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.

Anatomy

The class attribute values represent part names. Other attributes represent their corresponding props.

Svelte
<div class="whole">
  <div class="top" aria-orientation={ariaOrientation}>
    {#each labels as label}
      <button class="label">{label}</button>
    {/each}
  </div>
  {#each restProps as snippet}
    <div class="main">{snippet}</div>
  {/each}
</div>

Props

Type

(value) indicates the default value for the prop.

TypeScript
interface TabsProps {
  labels?: string[];
  current?: number; // bindable (0)
  ariaOrientation?: "horizontal" | "vertical";
  styling?: SVSClass;
  variant?: string; // bindable (VARIANT.NEUTRAL)
  [key: string]: unknown | Snippet; // labels or contents of each tab
}

Additional Props

  • labels - Array of strings specifying the label text for each tab button
  • current - Index of the currently active tab
  • restProps - Label or content snippets for each tab and panel pair
    • label* - Snippets with names starting with label are used as tab labels
    • panel* - Snippets with names starting with panel are used as panel content

Labels and panels correspond to each other in the sorted order of snippet names. If they cannot be mapped, the component will not be rendered.

Styling

To learn more, see Styling.

Variant Management

The currently active tab (button) will have the active. Other tabs are not automatically switched.

Default Class Name

svs-tabs

Exports

Types

TypeScript
type TabsReqdProps = never;
type TabsBindProps = "current" | "variant";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.

With Interactive Variant

Preset for Demo
Enter variant as you like
Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.