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.
Type	boolean
Default	false

selectedIndex bindableoptional
Description	Active page index. Note that SSR will always render the first page height, regardless of the initial active index.
Type	number
Default	0

theme optional
Description	Custom color scheme. If undefined, inherits default Tweakpane theme equivalent to ThemeUtils.presets.standard, or the theme set with setGlobalDefaultTheme().
Type	Theme
Default	undefined

---

Slots

default
Description	A <TabPage> component.
Type	{}