[feature request] tabs: html elements in title

[eviltik]

Hi !

Currently, addTab only support title attribute, which is pushed into the Dom as innerText (i think), not innerHTML. So we can't put our title in a span or use google material symbols icons without a little hack.

Hack:

  installTabs() {

    // let's add an "icon" attribute
    const pages = [
      { title:'General', icon:'page_info', },
      { title:'Layers', icon:'layers' },
      { title:'Lights', icon:'lightbulb' },
      { title:'Config', icon:'settings_applications' }
    ];

    // this.gui is an instance of tweakpane
    this.tabs = this.gui.addTab({ pages } );

    this.tabGeneral = this.tabs.pages[0];
    this.tabLayers = this.tabs.pages[1];
    this.tabLights = this.tabs.pages[2];
    this.tabConfig = this.tabs.pages[3];

    // update tab title with icons if needed
    let i = 0;
    document.querySelectorAll('.tp-tbiv_t').forEach(el => {
      if (pages[i].icon) {
        el.innerHTML = `<i class="msy-sharp" title="${el.innerText}">${pages[i].icon}</i>`;
      }
      i++;
    });
  }

It should be great to be able to set HTML directly in pages elements, i.e

const pages = [
  { html:'<i class="msy-sharp" title="General">page_info</i>' },
  { html:'<i class="msy-sharp" title="Layers">layers</i>' },
  { html:'<i class="msy-sharp" title="Lights">lightbulb</i>' },
  { html:'<i class="msy-sharp" title="Config">settings_applications</i>' }
];

this.tabs = this.gui.addTab({ pages } );

What do you think ?

I was using DAT.gui, then lil-gui, now definitively switched to tweakpane. Great job !

[cocopon]

Thank you for using Tweakpane!

Using innerHTML should be avoided due to its potential security risks. What do you think about adding a new property icon: HTMLElement instead?

[eviltik]

The security risk is minor because tabs title are defined by the developer. But tabs title (or icons) can come from a database or outside too, who know's ... so ...

Agree with an icon:HTMLElement implementation !