repository·gh-pages·Indexed 23 days ago
https://github.com/adamschwartz/chrome-tabsA web-based UI component (version 5.4.0) that replicates Google Chrome's tab bar using HTML, CSS, and JS. It features drag-and-drop functionality powered by Draggabilly and provides an API for managing tabs via methods like addTab(), removeTab(), updateTab(), and setCurrentTab(), as well as events for tab addition, removal, reordering, and active tab changes.
The ChromeTabs instance emits custom events on the container element (this.el). You can listen for these events to react to UI changes.
Emitted Events:
tabAdd: Fired when a tab is added. Detail contains { tabEl }.tabRemove: Fired when a tab is removed. Detail contains { tabEl }.activeTabChange: Fired when the active tab changes. Detail contains { tabEl }.tabReorder: Fired when a tab is dragged to a new position. Detail contains { tabEl, originIndex, destinationIndex }.You can programmatically control which tab is currently active using setCurrentTab(tabEl).
activeTabEl: A getter that returns the currently active tab element (the one with the active attribute) or null if none are active.hasActiveTab(): A method that returns true if there is an active tab, false otherwise.setCurrentTab(tabEl): Sets the provided element as the active tab and emits the activeTabChange event.ChromeTabs, instantiate the ChromeTabs class and call the init(el) method, passing the DOM element that will serve as the container for the tabs. The init method sets up styles, event listeners (including window resize), and the drag-and-drop functionality using Draggabilly.removeTab(tabEl) to remove a specific tab element from the UI. If the removed tab was the active tab, ChromeTabs will automatically attempt to set the next or previous tab as the active one. The tabRemove event is emitted on the container element.updateTab(tabEl, tabProperties) to modify the content of an existing tab element. This allows you to change the title, favicon, or id (via data-tab-id).Use addTab(tabProperties, options) to create a new tab.
tabProperties:
title (string): The text to display in the tab. Defaults to 'New tab'.favicon (string|boolean): A URL to a favicon image. If false, the favicon element is hidden.id (string): An optional ID to be set as a data-tab-id attribute on the tab element.options:
animate (boolean): Whether to trigger a CSS animation when the tab is added. Defaults to true.background (boolean): If true, the new tab will not be set as the active tab. Defaults to false.When a tab is added, the tabAdd event is emitted on the container element.