@freedomcore/tabs-bar

Chrome-style browser tabs with drag-and-drop reordering, persistence, and customizable styling.

Installation

npm install @freedomcore/tabs-bar

Usage

<link rel="stylesheet" href="node_modules/@freedomcore/tabs-bar/tabs-bar.css">

<tabs-bar-fc id="main-tabs">
  <tab-fc label="Home" active></tab-fc>
  <tab-fc label="Settings"></tab-fc>
  <tab-fc label="About"></tab-fc>
</tabs-bar-fc>

<script type="module">
  import '@freedomcore/tabs-bar';
</script>

Attributes

<tabs-bar-fc>

| Attribute | Description | |-----------|-------------| | id | Required for persistence | | closable | Enable close buttons on tabs | | addable | Show "new tab" button |

<tab-fc>

| Attribute | Description | |-----------|-------------| | label | Tab display text | | active | Currently selected tab | | icon | Optional icon URL |

Events

tabsBar.addEventListener('tab-change', (e) => {
  console.log('Active tab:', e.detail.tab);
});

tabsBar.addEventListener('tab-close', (e) => {
  console.log('Closed:', e.detail.tab);
});

API

const tabs = document.querySelector('tabs-bar-fc');
tabs.addTab({ label: 'New Tab' });
tabs.activeTab = 'tab-id';

License

MIT © FreedomCore