TabPage

Contains a collection of Tweakpane controls to be presented as a single group inside a <TabGroup> component.

Provides page values to Tweakpane's addTab method.

The name of this concept within the underlying vanilla JS Tweakpane API is page, but it has been changed to TabPage in Svelte Tweakpane UI for clarity its relationship to the <TabGroup> component.

Usage outside of a <TabGroup> component wouldn't make much sense, but in such cases the <TabPage> will be implicitly wrapped in a <TabGroup> and <Pane position="inline">.

---

Example

Demo

Count A: 0
Count B: 0

Code

TabPageExample.svelte

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

  let countA = 0
  let countB = 0
</script>

<TabGroup>
  <TabPage title="A">
    <Button on:click={() => countA++} title="Button A" />
  </TabPage>
  <TabPage title="B">
    <Button on:click={() => countB++} title="Button B" />
  </TabPage>
</TabGroup>

<pre>
Count A: {countA}
Count B: {countB}
</pre>

---

Props

title optional
Description	Text in the tab.
Type	string
Default	'Tab Page'

disabled optional
Description	Prevent interactivity and gray out the control.
Type	boolean
Default	false

selected bindableoptional
Description	Sets the page is the active tab. When bound it will indicate whether the tab is active.
Type	boolean
Default	false

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

---

Slots

default
Description	Any Tweakpane component, except a <Pane>.
Type	{}