Skip to content
Svelte Tweakpane UI
Core Components

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.

TypeBaseBladeParams

disabled

🔗
optional
Description

Prevent interactivity and gray out the control.

Typeboolean
Defaultfalse

theme

🔗
optional
Description

Custom color scheme.

TypeTheme
Defaultundefined
Inherits default Tweakpane theme equivalent to ThemeUtils.presets.standard, or the theme set with setGlobalDefaultTheme().

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.

TypeBladeRef

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.

TypeTpPluginBundle
Defaultundefined