Documentation

Markup

    
<nav>
  <cba-tabs>
    <cba-tab id="import-tab">Import/export</cba-tab>
    <cba-tab id="cba-tab">CBA</cba-tab>
    <cba-tab id="functions-tab">funcions</cba-tab>
  </cba-tabs>
</nav>
<main>
  <cba-panel aria-labelledby="import-tab">
    <h2>Import/Export</h2>
  </cba-panel>
  <cba-panel aria-labelledby="cba-tab">
    <h2>CBA</h2>
  </cba-panel>
  <cba-panel aria-labelledby="functions-tab">
    <h2>Functions</h2>
  </cba-panel>
</main>
    
  

select event

    
const cbaTabs = document.querySelector("cba-tabs");
cbaTabs.select("import-tab");
    
  

tabChange event

    
cbaTabs.addEventListener("tabChange", ({detail}) =>
{
  console.log(detail);
});