new Tab({ headerPlacement: 'Top', items: [...] });     // Default
new Tab({ headerPlacement: 'Left', items: [...] });    // Sidebar
new Tab({ headerPlacement: 'Bottom', items: [...] });  // Bottom
new Tab({ headerPlacement: 'Right', items: [...] });   // Right side

new Tab({ height: '400px', heightAdjustMode: 'None', items: [...] });
new Tab({ heightAdjustMode: 'Auto', items: [...] });
new Tab({ heightAdjustMode: 'Content', items: [...] });
new Tab({ height: '100%', heightAdjustMode: 'Fill', items: [...] });

new Tab({ loadOn: 'Demand', items: [...] });    // Lazy load (default)
new Tab({ loadOn: 'Dynamic', items: [...] });   // Reload each time
new Tab({ loadOn: 'Init', items: [...] });      // Load all at init

new Tab({ swipeMode: 'Both', items: [...] });      // Both touch and mouse
new Tab({ swipeMode: 'Touch', items: [...] });     // Mobile touch only
new Tab({ swipeMode: 'Mouse', items: [...] });     // Desktop mouse only
new Tab({ swipeMode: 'None', items: [...] });      // Disabled swiping

import { Tab } from '@syncfusion/ej2-navigations';

let tabObj: Tab = new Tab({
    items: [
        {
            header: { 'text': 'Twitter' },
            content: 'Twitter is an online social networking service...'
        },
        {
            header: { 'text': 'Facebook' },
            content: 'Facebook is an online social networking service...'
        },
        {
            header: { 'text': 'WhatsApp' },
            content: 'WhatsApp Messenger is a proprietary cross-platform...'
        }
    ]
});

tabObj.appendTo('#element');

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tab Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
    <div id="element"></div>
</body>
</html>

@import '../../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';

let tabObj: Tab = new Tab({
    heightAdjustMode: 'Auto',  // 'None', 'Auto', 'Content', 'Fill'
    height: '400px',  // Set container height when using 'None' or 'Auto'
    items: [
        { header: { 'text': 'Tab 1' }, content: 'Short content' },
        { header: { 'text': 'Tab 2' }, content: 'Much longer content with more text...' },
        { header: { 'text': 'Tab 3' }, content: 'Another tab with varying content length' }
    ]
});
tabObj.appendTo('#element');

let tabObj: Tab = new Tab({
    showCloseButton: true,
    items: [
        { header: { 'text': 'Home' }, content: 'Home content...' },
        { header: { 'text': 'Editor' }, content: 'Editor content...' },
        { header: { 'text': 'Settings' }, content: 'Settings content...' }
    ]
});
tabObj.appendTo('#element');

// Optionally handle close button clicks
tabObj.element.addEventListener('close', (e: any) => {
    console.log(`Closed tab at index: ${e.index}`);
});

let tabObj: Tab = new Tab({
    overflowMode: 'Popup',  // Enable popup mode for overflow tabs
    reorderActiveTab: false,  // Don't reorder active tab in popup (keep it highlighted)
    heightAdjustMode: 'Auto',
    items: [
        { header: { 'text': 'India' }, content: 'India content...' },
        { header: { 'text': 'Canada' }, content: 'Canada content...' },
        { header: { 'text': 'Australia' }, content: 'Australia content...' },
        // ... many more tabs that trigger popup mode
    ]
});
tabObj.appendTo('#element');

let tabObj: Tab = new Tab({
    items: [
        { header: { 'text': 'Home' }, content: 'Home content' }
    ]
});
tabObj.appendTo('#element');

// Add new tab dynamically
document.getElementById('addTabBtn')?.addEventListener('click', () => {
    let newTabCount = tabObj.items.length;
    let newTab = {
        header: { 'text': `Tab ${newTabCount}` },
        content: `Content for tab ${newTabCount}`
    };
    tabObj.addTab([newTab]);  // Add at end
    // Or insert at specific position: tabObj.addTab([newTab], 1);
});

// Remove tab by index
document.getElementById('removeTabBtn')?.addEventListener('click', () => {
    if (tabObj.items.length > 1) {
        tabObj.removeTab(tabObj.items.length - 1);  // Remove last tab
    }
});

let tabObj: Tab = new Tab({
    enablePersistence: true,  // Enable localStorage-based persistence
    items: [
        { header: { 'text': 'Dashboard' }, content: 'Dashboard...' },
        { header: { 'text': 'Analytics' }, content: 'Analytics...' },
        { header: { 'text': 'Settings' }, content: 'Settings...' }
    ]
});
tabObj.appendTo('#element');

// When user returns to page, the previously selected tab is automatically restored

let tabObj: Tab = new Tab({
    cssClass: 'e-tab-custom-style',  // Add custom CSS class
    items: [...]
});
tabObj.appendTo('#element');

.e-tab.e-tab-custom-style .e-tab-header .e-toolbar-item.e-active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: 3px solid #667eea;
}

.e-tab.e-tab-custom-style .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    font-weight: 600;
    color: white;
}

import { Tab } from '@syncfusion/ej2-navigations';
import { Ajax } from '@syncfusion/ej2-base';

let ajax: Ajax = new Ajax('./api/tab-content', 'GET', true);

ajax.onSuccess = (data: string): void => {
    let tabObj: Tab = new Tab({
        items: [
            { header: { 'text': 'Home' }, content: 'Home content' },
            { header: { 'text': 'Remote Content' }, content: data }
        ]
    });
    tabObj.appendTo('#element');
};

ajax.send();

// Or using Fetch API
async function loadTabContent() {
    try {
        let response = await fetch('api/tab-data', { method: 'POST' });
        let data = await response.json();
        
        let tabObj = new Tab({
            items: data.tabs  // Server returns array of tab items
        });
        tabObj.appendTo('#element');
    } catch (error) {
        console.error('Failed to load tabs:', error);
    }
}

loadTabContent();

let tabObj: Tab = new Tab({
    allowDragAndDrop: true,  // Enable drag-drop
    dragArea: '#dragContainer',  // Restrict drag area
    items: [...],
    dragged: (args) => {
        console.log(`Item moved from ${args.draggedIndex} to ${args.droppedIndex}`);
    }
});
tabObj.appendTo('#element');

// Transfer tabs between two Tab instances
let sourceTab: Tab = new Tab({
    allowDragAndDrop: true,
    dragArea: '#container',
    items: [{ header: { 'text': 'Source 1' }, content: 'Can be moved' }]
});
sourceTab.appendTo('#sourceTab');

let destTab: Tab = new Tab({
    allowDragAndDrop: true,
    dragArea: '#container',
    items: [{ header: { 'text': 'Dest 1' }, content: 'Receives items' }]
});
destTab.appendTo('#destTab');

// Mode 1: On-Demand (Lazy Loading) - Default
let tabObj: Tab = new Tab({
    // Content loaded only when tab is selected
    // Content persists in DOM once loaded
    items: [
        { header: { 'text': 'Tab 1' }, content: 'Content loaded on first select' }
    ]
});
tabObj.appendTo('#element');

// Mode 2: Dynamic - Only selected content in DOM
let dynamicTab: Tab = new Tab({
    loadOn: 'Dynamic',  // Content reloaded each time tab is selected
    items: []
});
dynamicTab.appendTo('#element');

// Mode 3: Initial - All content loaded upfront
let initialTab: Tab = new Tab({
    loadOn: 'Init',  // All tabs rendered on initialization
    items: []
});
initialTab.appendTo('#element');

// Select a tab by index
tabObj.select(1);  // Select second tab

// Get currently selected tab index
let activeIndex = tabObj.selectedItem;

// Determine if selection was user interaction or programmatic
tabObj.selecting = (args) => {
    if (args.isInteracted) {
        console.log('User clicked tab');
    } else {
        console.log('Tab selected programmatically');
    }
};

// Add new tab item dynamically
tabObj.addTab([
    {
        header: { 'text': 'New Tab' },
        content: 'New content here'
    }
], 2); // Insert at index 2

let tabObj: Tab = new Tab({
    items: [...], // your items
    heightAdjustMode: 'Auto',
    overflowMode: 'Scrollable'  // Enable scrollable mode
});

let tabObj: Tab = new Tab({
    items: [
        {
            header: { 
                'text': 'Settings',
                'iconCss': 'e-icon-settings'  // Add icon class
            },
            content: 'Settings content...'
        }
    ]
});