Skip to content
Svelte Tweakpane UI
Core Components

TabGroup

Contains a collection of <TabPage> components to be presented as a tabs.

Wrapper around Tweakpane's addTab method.

The name of this concept within the underlying vanilla JS Tweakpane API is tab, but it has been changed to TabGroup in Svelte Tweakpane UI to clarify it's relationship to the <TabPage> component.

Usage outside of a <Pane> component will implicitly wrap the tab in <Pane position="inline">.

Example

🔗

Demo

🔗

Code

🔗
TabGroupExample.svelte
<script lang="ts">
  import { Button, TabGroup, TabPage } from 'svelte-tweakpane-ui';
</script>


<TabGroup>
  <TabPage title="A">
    <Button on:click={() => alert('A...')} title="Button A" />
  </TabPage>
  <TabPage title="B">
    <Button on:click={() => alert('B...')} title="Button B" />
  </TabPage>
</TabGroup>

Props

🔗

disabled

🔗
optional
Description

Prevent interactivity and gray out the control.

Typeboolean
Defaultfalse

selectedIndex

🔗
bindableoptional
Description

Active page index.

Note that SSR will always render the first page height, regardless of the initial active index.

Typenumber
Default0

theme

🔗
optional
Description

Custom color scheme.

TypeTheme
Defaultundefined
Inherits default Tweakpane theme equivalent to ThemeUtils.presets.standard, or the theme set with setGlobalDefaultTheme().

Slots

🔗

default

🔗
Description

A <TabPage> component.

Type{}