tabs-bar demo

Sidebar

Numbered Variant

Content for 1 panel

Content for 2 panels

Content for 3 panels

data-variant="numbered" Numeric buttons with labels. Auto-generates number + "panel(s)" label.

Tabs Bar Variants

The tabs-bar component supports 4 variants. Each persists active state and order to localStorage.

Default Variant

Overview

Settings

Logs

Overview content - classic tab style with rounded top corners.

Settings content - keyboard navigation with Arrow keys.

Logs content - Home/End to jump to first/last tab.

Steps Variant (Wizard)

Choose

Configure

Deploy

Step 1: Choose your options

Step 2: Configure settings

Step 3: Deploy your app

Chrome Variant (Reorder + Close)

app.js

styles.css

index.html

app.js - Drag tabs to reorder. Click × to close.

styles.css - Order persists to localStorage.

index.html - Closing selects adjacent tab.

Usage

// Initialize all tabs on the page import { initTabsBar } from '@fc/ui/tabs-bar/index.js'; initTabsBar(); // Programmatic control import { setActiveTab, closeTab } from '@fc/ui/tabs-bar/index.js'; setActiveTab(barElement, 'tab-key'); closeTab(barElement, 'tab-key'); // Events bar.addEventListener('tabs-bar-change', (e) => { console.log('Active:', e.detail.key); }); bar.addEventListener('tabs-bar-reorder', (e) => { console.log('New order:', e.detail.order); });