Blades

Basics

addBlade() can create a blade without binding.

const pane = new Pane();
pane.addBlade({
  view: 'slider',
  label: 'brightness',
  min: 0,
  max: 1,
  value: 0.5,
});

Most of blades need a specific view and other required parameters. See the sections below for details.

If you are a TypeScript user, need to cast a created blade to a specific type to access full functionalities:

const b = pane.addBlade({
  view: 'slider',
  label: 'brightness',
  min: 0,
  max: 1,
  value: 0.5,
}) as SliderBladeApi;

// Access slider-specific fields
console.log(b.min, b.max);

.ts

Text

Parameters | API

const pane = new Pane();
pane.addBlade({
  view: 'text',
  label: 'name',
  parse: (v) => String(v),
  value: 'sketch-01',
});

List

Parameters | API

const pane = new Pane();
pane.addBlade({
  view: 'list',
  label: 'scene',
  options: [
    {text: 'loading', value: 'LDG'},
    {text: 'menu', value: 'MNU'},
    {text: 'field', value: 'FLD'},
  ],
  value: 'LDG',
});

Slider

Parameters | API

const pane = new Pane();
pane.addBlade({
  view: 'slider',
  label: 'brightness',
  min: 0,
  max: 1,
  value: 0.5,
});

Separator

Parameters | API

const pane = new Pane();
// ...
pane.addBlade({
  view: 'separator',
});
// ...