Toggle UI Element

Help & Support
1

Hey all,

Before I build this from scratch, I know PlayCanvas uses this all the time. Is there an implementation of this toggle button floating around anywhere?

Screen Shot 2022-03-03 at 11.16.08 AM
Screen Shot 2022-03-03 at 11.15.52 AM

Thanks in advance

1 Like
2

Under the hood, PlayCanvas uses the UI component library PCUI. I believe the implementation for that toggle button is the BooleanInput. Demo’d here.

3

I’m not sure it’s native to the library but if you look for it in editor.js of the Editor, you could ‘borrow’ the code :slight_smile:

4

This seems to be the code the editor.js script uses for that kind of toggles:

            case 'checkbox':
                if (args.enum) {
                    field = new ui.SelectField({
                        options: args.enum,
                        type: 'boolean'
                    });
                    field.flexGrow = 1;
                } else {
                    field = new ui.Checkbox();
                }

                field.value = args.value || 0;
                field.class.add('tick');

                linkField();

                panel.append(field);
                break;
2 Likes
5

Thanks everyone for the leads. Very helpful.