Folders and panels

A folder groups its children and folds; expanded sets its state and onExpand runs when it opens. A panel opens as a page of its own in Blueprint and shows as a folder in Tweakpane.

Setup, Tweakpane

import {UI} from 'uiconfig-tweakpane'
import 'uiconfig-tweakpane/theme.css'

// the panel goes into this element (without one, it floats at the top right)
const ui = new UI(document.getElementById('panel'))
ui.setTheme('light') // a mode of theme.css

// this page prints the log under the panel
const log = console.log

Setup, Blueprint

import {UI} from 'uiconfig-blueprint'

// the panel goes into this element (without one, it floats at the top right)
const ui = new UI(document.getElementById('panel'))

// this page prints the log under the panel
const log = console.log

folders-panels.js

const render = {exposure: 1, bloom: true, bloomStrength: 0.4, samples: 4}

const config = {
    type: 'folder',
    label: 'Render',
    expanded: true,
    children: [
        {
            type: 'slider',
            label: 'Exposure',
            bounds: [0, 4],
            stepSize: 0.05,
            property: [render, 'exposure'],
        },
        {
            type: 'folder',
            label: 'Bloom',
            expanded: true,
            children: [
                {type: 'checkbox', label: 'Enabled', property: [render, 'bloom']},
                {
                    type: 'slider',
                    label: 'Strength',
                    bounds: [0, 2],
                    stepSize: 0.01,
                    property: [render, 'bloomStrength'],
                },
            ],
        },
        {
            type: 'folder',
            label: 'Closed folder',
            expanded: false,
            onExpand: () => log('the folder opened'),
            children: [
                {
                    type: 'slider',
                    label: 'Samples',
                    bounds: [1, 16],
                    stepSize: 1,
                    property: [render, 'samples'],
                },
            ],
        },
        // Blueprint: a row that opens a page; Tweakpane: a folder
        {
            type: 'panel',
            label: 'Advanced',
            children: [
                {
                    type: 'slider',
                    label: 'Samples',
                    bounds: [1, 16],
                    stepSize: 1,
                    property: [render, 'samples'],
                },
            ],
        },
    ],
}

ui.appendChild(config)

Log