Making a plugin full-width

This issue has been tracked since 2023-03-16.

I'd like to make a plugin for Tweakpane that allows you to have an expanded list that you can hover on and select an item from the list. Like the image below.

Screen Shot 2023-03-16 at 4 04 25 PM

From my experiments so far, it seems like any input binding produces a side-by-side view with a variable name on the left and an editable field on the right. Is there any way to accomplish something sort of like this?

cocopon wrote this answer on 2023-03-19

Passing null to label option hides a label and widen a control area.

image

const pane = new Pane();
pane.addInput({foo: 1}, 'foo', {min: 0, max: 1});
pane.addInput({foo: 1}, 'foo', {min: 0, max: 1, label: null});

(This option doesn't work properly due to a bug and it has been fixed in the latest version 3.1.7)

Tresky wrote this answer on 2023-03-19

Awesome! That worked. Thanks! Is there a way to control this from inside the plugin? I couldn't find a way to force the label to null.

cocopon wrote this answer on 2023-03-19

There is no way to control it from the plugin. All bindings have a label and users expect to be able to specify the label.

Tresky wrote this answer on 2023-03-19

Okay I figured that would be the case as it would create unexpected behavior. Thanks for the help!

cocopon wrote this answer on 2023-03-19

FYI: You can create a blade without label not as an input binding, but as a blade without a binding. Built-in separator plugin may be helpful to know its structure:

https://github.com/cocopon/tweakpane/blob/03bbd12592534ec6af96a23cae130083d4f886bd/packages/core/src/blade/separator/plugin.ts

Tresky wrote this answer on 2023-03-19

I didn't realize that. Thank you! I'll look into this and go this route instead.

More Details About Repo
Owner Name cocopon
Repo Name tweakpane
Full Name cocopon/tweakpane
Language TypeScript
Created Date 2016-05-10
Updated Date 2023-03-17
Star Count 2603
Watcher Count 19
Fork Count 71
Issue Count 11

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date