Lion Logo Lion Guides Components Docs Blog Toggle darkmode

Tabs: Features

Selected Index

You can set the selectedIndex to select a certain tab.

Slots Order

The tab and panel slots are ordered by DOM order.

This means you can switch the grouping in your lion-tabs from tab + panel to all tabs first or all panels first.

Nesting tabs

You can include tabs within tabs

Distribute New Elements

Below, we demonstrate on how you could dynamically add new tab + panels.

One way is by creating the DOM elements and appending them as needed.

Inside your lion-tabs extension, an example for appending nodes on a certain button click:

__handleAppendClick() {
  const tabsAmount = this.children.length / 2;
  const tab = document.createElement('button');
  tab.setAttribute('slot', 'tab');
  tab.innerText = `tab ${tabsAmount + 1}`;
  const panel = document.createElement('p');
  panel.setAttribute('slot', 'panel');
  panel.innerText = `panel ${tabsAmount + 1}`;
  this.append(tab);
  this.append(panel);
}

The other way is by adding data to a Lit property where you loop over this property in your template. You then need to ensure this causes a re-render.

__handlePushClick() {
  const tabsAmount = this.children.length;
  myCollection = [
    ...myCollection,
    {
      button: `tab ${tabsAmount + 1}`,
      panel: `panel ${tabsAmount + 1}`,
    },
  ];
  renderMyCollection();
}

Make sure your template re-renders when myCollection is updated.

<lion-tabs id="pushTabs">
  ${myCollection.map(item => html`
  <button slot="tab">${item.button}</button>
  <p slot="panel">${item.panel}</p>
  `)}
</lion-tabs>