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

FolderExample.svelte

<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. If undefined, inherits default Tweakpane theme equivalent to ThemeUtils.presets.standard, or the theme set with setGlobalDefaultTheme().
Type	Theme
Default	undefined

---

Slots

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