Implementing Syncfusion TypeScript Tab Component

The Syncfusion TypeScript Tab is a powerful content container that displays multiple contents in a specific space, one at a time. It supports rendering from JSON items or HTML elements, with extensive customization, animation, accessibility, and responsive design capabilities.

When to Use This Skill

• Basic Tab Setup: Create simple tabbed interfaces with headers and content
• Tab Selection & Navigation: Handle programmatic and user-initiated tab selection
• Customization: Style headers, content, icons, and selected states
• Responsive Design: Implement adaptive tabs with scrollable or popup modes
• Dynamic Content: Load tab items dynamically or through data sources
• Advanced Features: Drag-and-drop reordering, nested tabs, collapsible tabs, wizards
• User Experience: Add animations, tooltips, keyboard navigation, accessibility
• State Management: Persist tab state across sessions

Key Features

1. Rendering: Create tabs from JSON items collection or HTML elements
2. Adaptive: Responsive rendering with scrollable tabs and popup menus
3. Customization: Header icons, orientation, styling, and theming support
4. Animation: Built-in animation effects for tab transitions with animation property
5. Accessibility: WCAG compliance with keyboard navigation and ARIA attributes
6. Drag & Drop: Reorder tabs and transfer items between interfaces with allowDragAndDrop
7. Dynamic Loading: Control content loading with loadOn property (Demand, Dynamic, Init)
8. State Persistence: Restore selected tab state across user sessions using enablePersistence
9. Security: Built-in HTML sanitization with enableHtmlSanitizer to prevent XSS attacks
10. Swipe Gestures: Tab navigation via touch/mouse swipe with swipeMode property

Complete Enumeration Reference

HeaderPosition - Tab Header Placement

Controls where tab headers are positioned relative to content.

Value	Placement	Use Case
'Top'	Headers above content (default)	Dashboard, forms, standard tabs
'Bottom'	Headers below content	Document viewers, bottom navigation
'Left'	Headers on left side	Admin panels, sidebar navigation
'Right'	Headers on right side	Specialized layouts

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

HeightStyles - Content Height Adjust Modes

Controls how tab content height is calculated.

Value	Behavior	Usage
'None'	Use explicit height property	Fixed containers
'Auto'	All tabs match tallest content	Equalizing heights
'Content'	Each tab matches its own content (default)	Variable-height content
'Fill'	Content fills parent container	Responsive fills

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

ContentLoad - Content Rendering Modes

Controls when tab content is loaded into the DOM.

Value	Loading	DOM	When Used
'Demand' (default)	On first selection	Persists	Many tabs, static content
'Dynamic'	On each selection	Only selected	Dynamic/live data
'Init'	All upfront	Always in DOM	Few tabs, small content

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

TabSwipeMode - Swipe Gesture Control

Controls which input methods trigger tab swiping.

Value	Touch	Mouse	Desktop	Mobile
'Both' (default)	✅	✅	All devices	All devices
'Touch'	✅	❌	Desktop only	Mobile users
'Mouse'	❌	✅	Desktop users	Mouse input only
'None'	❌	❌	Swiping disabled	Swiping disabled

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

---

Core Documentation (Start Here)

1. Getting Started ⭐ START HERE

   • Installation and setup
   • First Tab component
   • HTML structure and imports

2. Tab Structure and Content

   • Tab item structure
   • Headers and content
   • Tab selection

API Reference & Properties

3. Complete API Properties Reference 📚 COMPREHENSIVE

   • All 24+ properties documented
   • Usage examples for each property
   • Property combinations and recommendations
   • Core, rendering, interaction, animation properties

4. Event Handling Reference 📚 COMPREHENSIVE

   • All 11 events documented
   • Event arguments (SelectEventArgs, SelectingEventArgs, DragEventArgs, etc.)
   • Event lifecycle and timing
   • Practical event patterns

5. Complete Methods Reference 📚 COMPREHENSIVE

   • All 18 methods documented with signatures and parameters
   • Tab management methods (addTab, removeTab, select)
   • Visibility and state control (hideTab, enableTab, disable)
   • Event management (addEventListener, removeEventListener)
   • Component lifecycle (destroy, refresh, refreshActiveTab)
   • Utility methods (getItemIndex, getRootElement, appendTo, dataBind)
   • Practical code examples for each method
   • Method interaction patterns and best practices

Customization & Styling

6. Customization and Styling
   • CSS structure
   • Header and content styling
   • showCloseButton property
   • Built-in themes
   • Custom styling examples

Content & Data

7. Data Binding and Dynamic Content
   • Loading methods (JSON, AJAX, DataManager)
   • loadOn property (Demand, Dynamic, Init)
   • addTab() and removeTab() methods
   • POST requests and API integration
   • Content rendering modes

Layout & Responsiveness

8. Content Orientation and Header Placement

   • headerPlacement (Top, Bottom, Left, Right)
   • Horizontal vs vertical layouts
   • Responsive design patterns
   • Sidebar navigation implementation

9. Responsive and Adaptive Modes

   • Scrollable mode
   • Popup/dropdown mode
   • Multi-row mode
   • overflowMode property

Advanced & Features

10. Advanced Features

    • Drag and drop (allowDragAndDrop, dragArea)
    • reorderActiveTab property
    • Nested and collapsible tabs
    • Tab-based wizards
    • Icon and tooltip integration

11. Animation and Transitions

    • animation property (TabAnimationSettingsModel)
    • Effects: SlideLeftIn, SlideRightIn, FadeIn, ZoomIn, etc.
    • swipeMode property (Both, Touch, Mouse, None)
    • Custom animation timing

12. State Persistence

    • enablePersistence property
    • localStorage-based persistence
    • Multi-tab forms and dashboards
    • Advanced persistence patterns

Accessibility & Internationalization

13. Accessibility and Localization
    • WCAG compliance and ARIA
    • Keyboard navigation
    • enableRtl property (RTL support)
    • locale property (i18n)

Security

14. Security and HTML Sanitization 🔒 IMPORTANT
    • enableHtmlSanitizer property
    • XSS prevention
    • User content protection
    • Security best practices

Troubleshooting

15. Edge Cases and Troubleshooting
    • Height and scroll management
    • Browser compatibility

---

Quick Start

Basic Tab with JSON Items

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');

HTML Structure

<!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>

CSS Setup

@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';

Feature-Specific Usage Scenarios

Tab Content Height Customization

Use the heightAdjustMode property to control how tab content height is adjusted:

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');

Height Modes:

• None: Content height matches Tab container height (requires explicit height)
• Auto: All tabs adjust to match the tallest content
• Content: Each tab adjusts to its own content height (default)
• Fill: Tab content fills the parent element completely

Show Close Button on Tabs

Enable users to close individual tabs by clicking a close button:

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}`);
});

Reorder Active Tab in Popup Mode

Control how the active tab behaves when tabs overflow into a popup menu:

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');

When reorderActiveTab is true (default), clicking a tab in the popup moves it to the main view. When false, the tab remains highlighted in the popup without being reordered to the main view.

Load Tab Items Dynamically

Add tabs programmatically in response to user actions:

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
    }
});

State Persistence Across Page Refreshes

Automatically save and restore the selected 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

Customize Selected Tab Appearance

Use CSS classes to override default styling for selected tabs:

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

Then define custom CSS:

.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;
}

Load Content Through POST Requests

Fetch tab content from a server:

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();

Drag and Drop Between Tabs or External Sources

Enable users to move tab items within the same tab or to external components:

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');

Content Rendering Modes

Control how and when tab content is loaded:

// 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');

Common Patterns

Pattern 1: Programmatic Tab Selection

// 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');
    }
};

Pattern 2: Dynamic Tab Addition

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

Pattern 3: Responsive Tabs with Scrolling

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

Pattern 4: Tab with Icons

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

Key Props and Configuration

Property	Type	Purpose	Common Values
items	Array	Tab items collection	Array of item objects
selectedItem	number	Active tab index	0, 1, 2, ...
heightAdjustMode	string	Auto-adjust height	'Auto', 'Content', 'Scroll'
overflowMode	string	Handle overflow tabs	'Scrollable', 'Popup', 'MultiRow'
animation	object	Animation settings	{ previous, next }
headerPlacement	string	Header placement	'Top', 'Bottom', 'Left', 'Right'
enableRtl	boolean	RTL support	true, false
allowDragAndDrop	boolean	Enable drag-drop	true, false
enablePersistence	boolean	State persistence	true, false

Common Use Cases

1. Multi-Panel Forms: Organize form fields across multiple tabs with validation
2. Documentation Sites: Create tabbed code examples (TypeScript, JavaScript, HTML)
3. Dashboard Layouts: Organize dashboard widgets in tab sections
4. Step-by-Step Wizards: Create sequential workflows using tabs
5. Content Organization: Categorize and display large datasets
6. Feature Toggles: Show/hide related features in tab panels
7. Admin Interfaces: Organize settings and configuration options
8. Mobile Navigation: Responsive tab-based navigation for small screens

---

Next Steps:

• Read the appropriate reference file based on your use case
• Check the quick start example for basic setup
• Review common patterns for your specific scenario
• Refer to edge cases guide for troubleshooting