UI components

Tweakpane has useful components to organize the pane: folders, buttons, etc.

Folder

Use addFolder() to add folders. You can add all types of components to the returned folder just like adding them to the pane.

const pane = new Pane();

const f1 = pane.addFolder({
  title: 'Basic',
});
f1.addInput(PARAMS, 'speed');

const f2 = pane.addFolder({
  title: 'Advanced',
  expanded: false,   // optional
});
f2.addInput(PARAMS, 'acceleration');
f2.addInput(PARAMS, 'randomness');

Pane title

title option of the pane creates a root title. It can expand/collapse the whole pane.

const pane = new Pane({
  title: 'Parameters',
});

// ...

Button

addButton() adds a button component. Use on() to handle click events.

const pane = new Pane();

const btn = pane.addButton({
  title: 'Increment',
  label: 'counter',   // optional
});

let count = 0;
btn.on('click', () => {
  count += 1;
  console.log(count);
});

Tab

addTab() adds a tab component. You can access an each page by pages[] and add components into it.

const pane = new Pane();

const tab = pane.addTab({
  pages: [
    {title: 'Parameters'},
    {title: 'Advanced'},
  ],
});

tab.pages[0].addInput(...);

Separator

addSeparator() is for adding a separator between components.

const pane = new Pane();
pane.addButton({title: 'Previous'});
pane.addButton({title: 'Next'});
pane.addSeparator();
pane.addButton({title: 'Reset'});