syncfusion-javascript-tab

# 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 | ```typescript 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 | ```typescript 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 | ```typescript 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 | ```typescript 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](references/getting-started.md)** ⭐ START HERE - Installation and setup - First Tab component - HTML structure and imports 2. **[Tab Structure and Content](references/tab-structure-and-content.md)** - Tab item structure - Headers and content - Tab selection ### API Reference & Properties 3. **[Complete API Properties Reference](references/api-properties-reference.md)** 📚 COMPREHENSIVE - All 24+ properties documented - Usage examples for each property - Property combinations and recommendations - Core, rendering, interaction, animation properties 4. **[Event Handling Reference](references/event-handling-reference.md)** 📚 COMPREHENSIVE - All 11 events documented - Event arguments (SelectEventArgs, SelectingEventArgs, DragEventArgs, etc.) - Event lifecycle and timing - Practical event patterns 5. **[Complete Methods Reference](references/methods-reference.md)** 📚 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](references/customization-and-styling.md)** - CSS structure - Header and content styling - `showCloseButton` property - Built-in themes - Custom styling examples ### Content & Data 7. **[Data Binding and Dynamic Content](references/data-binding.md)** - 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](references/content-orientation.md)** - `headerPlacement` (Top, Bottom, Left, Right) - Horizontal vs vertical layouts - Responsive design patterns - Sidebar navigation implementation 9. **[Responsive and Adaptive Modes](references/responsive-adaptive-modes.md)** - Scrollable mode - Popup/dropdown mode - Multi-row mode - `overflowMode` property ### Advanced & Features 10. **[Advanced Features](references/advanced-features.md)** - Drag and drop (`allowDragAndDrop`, `dragArea`) - `reorderActiveTab` property - Nested and collapsible tabs - Tab-based wizards - Icon and tooltip integration 11. **[Animation and Transitions](references/animation-effects.md)** - `animation` property (TabAnimationSettingsModel) - Effects: SlideLeftIn, SlideRightIn, FadeIn, ZoomIn, etc. - `swipeMode` property (Both, Touch, Mouse, None) - Custom animation timing 12. **[State Persistence](references/state-persistence.md)** - `enablePersistence` property - localStorage-based persistence - Multi-tab forms and dashboards - Advanced persistence patterns ### Accessibility & Internationalization 13. **[Accessibility and Localization](references/accessibility-and-localization.md)** - WCAG compliance and ARIA - Keyboard navigation - `enableRtl` property (RTL support) - `locale` property (i18n) ### Security 14. **[Security and HTML Sanitization](references/security-html-sanitization.md)** 🔒 IMPORTANT - `enableHtmlSanitizer` property - XSS prevention - User content protection - Security best practices ### Troubleshooting 15. **[Edge Cases and Troubleshooting](references/edge-cases-and-troubleshooting.md)** - Height and scroll management - Browser compatibility --- ## Quick Start ### Basic Tab with JSON Items ```typescript 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 ```html <!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 ```css @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: ```typescript 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: ```typescript 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: ```typescript 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)