محول الطابع الزمني لـ Unix

Welcome to the Tab System

This is the overview tab. Tabs automatically remember which tab you had selected when you refresh the page using localStorage.

Use the arrow keys to navigate between tabs, or click on them directly. The system is fully accessible with ARIA support.

Key Features

• State persistence (remembers active tab)
• Keyboard navigation (Arrow keys, Home, End)
• Multiple style variants (default, pills, boxed, minimal, vertical)
• Color themes
• Icons and badges support
• Deep linking with URL hashes
• Fully accessible (ARIA)
• Mobile optimized

كيفية الاستخدام

Add the following HTML structure to create tabs:

<div class="tab-container" data-tab-key="unique_key">
  <ul class="tab-nav">
    <li><button class="tab-button">Tab 1</button></li>
    <li><button class="tab-button">Tab 2</button></li>
  </ul>
  <div class="tab-content-area">
    <div class="tab-panel">Content 1</div>
    <div class="tab-panel">Content 2</div>
  </div>
</div>

Inbox Messages

You have 3 new messages in your inbox. Badges can be used to show counts or status.

Starred Items

12 items are marked as important. You can use badges to show counts, status, or notifications.

Deleted Items

Your trash is empty. Items are permanently deleted after 30 days.

Data Attributes

• data-tab-key="unique_key" - Custom localStorage key for state persistence
• data-tab-default="2" - Set default active tab (0-based index, default: 0)
• data-tab-no-save - Disable state persistence (default: enabled)
• data-tab-no-animate - Disable animations
• data-tab-no-keyboard - Disable keyboard navigation
• data-tab-deep-link - Enable URL hash deep linking
• data-tab-id="custom" - Custom ID for deep linking (on tab buttons)

CSS Classes

• .tab-container - Main container (required)
• .tab-nav - Navigation list (required)
• .tab-button - Tab button (required)
• .tab-content-area - Content wrapper (required)
• .tab-panel - Tab content panel (required)
• Variants: .variant-pills, .variant-boxed, .variant-minimal, .variant-vertical
• Colors: .color-success, .color-info, .color-warning, .color-danger
• المحاذاة: .align-center, .align-right, .full-width

JavaScript API

// Get instance
const tabs = window.Tabs.getInstance(element);

// Navigation methods
tabs.activate(2);     // Switch to tab at index 2
tabs.next();          // Go to next tab
tabs.previous();      // Go to previous tab
tabs.first();         // Go to first tab
tabs.last();          // Go to last tab

// Tab control
tabs.disableTab(1);   // Disable tab at index 1
tabs.enableTab(1);    // Enable tab at index 1

// State management
tabs.clearState();    // Clear saved state

// Create with options
new window.Tabs(element, {
  defaultTab: 0,
  saveState: true,
  keyboard: true,
  deepLink: false,
  onChange: (index, instance) => {
    console.log('Tab changed to:', index);
  },
  onBeforeChange: (newIndex, oldIndex, instance) => {
    // Return false to prevent tab change
    return true;
  }
});

// Listen to tab change events
element.addEventListener('tabchange', (e) => {
  console.log('Changed to:', e.detail.index);
});