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">.

Count A: 0
Count B: 0

<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>