Blade

Wraps the Tweakpane addBlade method.

Important: This component is provided for consistency with Tweakpane's API, but is not recommended for general use in Svelte Tweakpane UI because more helpful abstractions are available.

Please consider convenience components like <Separator>, etc. before using this component directly.

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

Tweakpane's vanilla JS API offers Blades as as a way to create unbound components, but in Svelte the same is achieved by simply not binding the component's value.

In the example, a <Separator> component would be preferred over <Blade>, and would obviate the need for the options param.

---

Example

Demo

Code

BladeExample.svelte

<script lang="ts">
  import { Blade } from 'svelte-tweakpane-ui'
</script>

<Blade
  options={{
    view: 'separator',
  }}
/>

---

Props

options required
Description	Blade configuration exposing Tweakpane's internal BladeParams.
Type	BaseBladeParams

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

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

ref bindablereadonlyoptional
Description	Reference to internal Tweakpane BladeApi for this blade. This property is exposed for advanced use cases only, such as when implementing convenience components wrapping <Blade>'s functionality. Direct manipulation of Tweakpane's internals can break Svelte Tweakpane UI abstractions.
Type	BladeRef

plugin optional
Description	Imported Tweakpane TpPluginBundle (aliased as Plugin) module to automatically register in the <Blade>'s containing <Pane>. This property is exposed for advanced use cases only, such as when implementing convenience components wrapping <Blade>'s functionality in combination with a Tweakpane plugin. Direct manipulation of Tweakpane's internals can break Svelte Tweakpane UI abstractions.
Type	TpPluginBundle
Default	undefined