Core Components

Folder

Organize multiple controls into a collapsable folder.

Wraps the Tweakpane addFolder method.

May also be used to label and group multiple controls without user-collapsibility by setting userExpandable to false and expanded to true.

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

Example

🔗

Demo

🔗

Code

🔗

<script lang="ts">
  import { Button, Checkbox, Folder, Monitor } from 'svelte-tweakpane-ui';

  let expanded = true;
  let count = 0;
</script>

<Folder bind:expanded title="Reticulation Management Folder">
  <Button on:click={() => count++} title="Increment" />
  <Monitor value={count} label="Count" />
</Folder>

<Checkbox bind:value={expanded} label="Expanded" />

Props

🔗

title 🔗 optional
Description	Text in folder title bar. Unlike a `<Pane>`, a `<Folder>`'s title bar is always visible and the title is always shown. It can be set to an empty string if you want an unadorned title bar.
Type	`string`
Default	`'Folder'`

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

expanded 🔗 bindableoptional
Description	Expand or collapse folder. When bound it will indicate whether the folder is expanded or collapsed.
Type	`boolean`
Default	`true`

userExpandable 🔗 optional
Description	Allow the user to be collapse and expand the folder by clicking its title bar.
Type	`boolean`
Default	`true`

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	`{}`

Folder

Example

Demo

Code

Props

title

disabled

expanded

userExpandable

theme

Slots

default