search

cocopon / tweakpane

:control_knobs: Compact GUI for fine-tuning parameters and monitoring value changes
https://tweakpane.github.io/docs/
MIT License
3.6k stars 90 forks source link

Is there any hide/show functionality #57

Closed ciknowles closed 4 years ago

ciknowles commented 4 years ago

I really like your plugin. Used datgui and controlkit but this seems cleaner.

Is there any way to hide/show an element? For example I might make a selection that should then hide/show a number of other buttons/inputs?

cocopon commented 4 years ago

Thank you for using Tweakpane!

How about using a folder? https://cocopon.github.io/tweakpane/misc.html#folder

You can show/hide child components by expanding/collapsing a folder like this:

const pane = new Tweakpane();
const params = {
  foo: 123,
  bar: 'hi',
}

const f = pane.addFolder({
  title: 'folder',
});
f.addInput(params, 'foo');
f.addInput(params, 'bar');
f.addButton({
  title: 'baz',
})

// You can expand/collapse a folder by .expanded
f.expanded = false;
ciknowles commented 4 years ago

Hi,

Thanks for you reply! I tried this but doesn't really fit my interface. I'll try and explain with an example.

I want a drop down input component. The user can select say 'Rectangle', 'Square', 'Circle' + a number of other shapes. When the user selects a shape I want the properties for this particular shape to show beneath. I have a lot of different items and I don't want a folder for each (unless I can hide it).

I can 'hack it in' by accessing item.controller.view.ele_.style (or something liek this) but this seems a little clumsy.

Chris

Chris

cocopon commented 4 years ago

I understand the situation! Added hidden property to toggle visibility. Please wait for the next release.

ciknowles commented 4 years ago

Wow - thank you!