syncfusion-react-tabs

# Implementing Tabs in Syncfusion React The Tab component organizes related content into tabbed sections with headers, allowing users to switch between views. This comprehensive skill guides you through setup, customization, content rendering strategies, API methods, events, accessibility, animations, persistence, and advanced features like drag-and-drop reordering. ## Table of Contents - [When to Use This Skill](#when-to-use-this-skill) - [Component Overview](#component-overview) - [Documentation and Navigation Guide](#documentation-and-navigation-guide) - [Quick Start Example](#quick-start-example) - [Common Patterns](#common-patterns) - [Key Properties Overview](#key-properties-overview) - [Methods & API Reference](#methods--api-reference) - [Events & Event Arguments](#events--event-arguments) - [Animation & Advanced Settings](#animation--advanced-settings) - [Related Skills](#related-skills) ## When to Use This Skill - **Creating tabbed interfaces** with header-based navigation - **Organizing content** into logical sections or views - **Building responsive layouts** with scrollable or popup overflow handling - **Customizing header styling** and icon positioning - **Managing content rendering** performance (lazy loading, dynamic, or initial render) - **Implementing drag-and-drop** tab reordering for user customization - **Adding localization support** for international applications - **Ensuring accessibility compliance** (WCAG, ARIA, keyboard navigation) - **Styling tabs** with custom CSS or theme customization - **Programmatically managing tabs** (add, remove, select, hide/show) - **Handling tab-related events** (selection, drag-drop, add, remove) - **Preserving user preferences** with state persistence - **Implementing smooth animations** and transitions ## Component Overview The Tab component is a navigation control that displays content organized into tabs. Each tab has a header and associated content. Tabs support: - **Multiple header positions** (top, bottom, left, right) - **Overflow handling** (scrollable navigation or popup mode) - **Flexible content rendering** (on-demand, dynamic, or initial load) - **Drag-and-drop reordering** for interactive tab management - **Full accessibility** with ARIA attributes and keyboard navigation - **Extensive customization** via CSS and theme options - **Internationalization** through localization APIs - **Animation effects** for content transitions - **State persistence** across page reloads - **HTML sanitization** for security ## Documentation and Navigation Guide ### Getting Started 📄 **Read:** [references/getting-started.md](references/getting-started.md) - Package dependencies and installation - Vite and Create React App setup - CSS imports and theme configuration - Basic tab initialization with JSON items - Minimal working example and running the app **When to read:** Start here to set up a basic Tab component in your React application. ### Header Styling & Customization 📄 **Read:** [references/header-styling.md](references/header-styling.md) - Built-in header style classes (e-fill, e-background, e-accent) - Icon positioning options (left, right, top, bottom) - Icon and header customization with CSS classes - Code examples for styled headers - Styling content and hover states **When to read:** Use this when you need to customize tab header appearance, add icons, or apply predefined styles. ### Orientation & Overflow Modes 📄 **Read:** [references/orientation-overflow.md](references/orientation-overflow.md) - Header placement positions (top, bottom, left, right) - Scrollable mode with navigation arrows - Popup mode with dropdown display - Touch and swipe support - Width constraints and responsive behavior **When to read:** Use this when you need to control header position, handle many tabs with overflow, or build responsive layouts. ### Content Rendering Strategies 📄 **Read:** [references/content-rendering.md](references/content-rendering.md) - On-demand rendering (lazy loading, default mode) - Dynamic rendering for state-isolated tabs - Initial rendering for state preservation - Performance vs. state considerations - Choosing the right rendering mode **When to read:** Use this to optimize tab content performance or preserve user interactions across tab switches. ### Drag and Drop Reordering 📄 **Read:** [references/drag-drop-reordering.md](references/drag-drop-reordering.md) - Enabling drag-and-drop with allowDragAndDrop - Handling drag events (onDragStart, dragging, dragged) - Preventing drag/drop for specific items - Tab-to-tab drag and drop - Dragging tabs to external sources (TreeView) - Drag area constraints **When to read:** Use this to allow users to reorder tabs or integrate tab dragging with other components. ### Accessibility & Localization 📄 **Read:** [references/accessibility-localization.md](references/accessibility-localization.md) - WCAG 2.2 and Section 508 compliance - ARIA attributes and roles for tabs - Keyboard navigation (arrows, Home, End, Enter, Escape) - Screen reader support - Localization with L10n class - Right-to-left (RTL) language support **When to read:** Use this when building accessible applications or supporting multiple languages. ## Quick Start Example Here's a minimal Tab component setup: ```jsx import React from 'react'; import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations'; import '@syncfusion/ej2-base/styles/tailwind3.css'; import '@syncfusion/ej2-buttons/styles/tailwind3.css'; import '@syncfusion/ej2-popups/styles/tailwind3.css'; import '@syncfusion/ej2-react-navigations/styles/tailwind3.css'; export default function TabExample() { const tabItems = [ { header: { text: 'Home' }, content: 'Welcome to the home tab' }, { header: { text: 'Profile' }, content: 'User profile information' }, { header: { text: 'Settings' }, content: 'Application settings' } ]; return ( <TabComponent> <TabItemsDirective> {tabItems.map((item, index) => ( <TabItemDirective key={index} header={item.header} content={item.content} /> ))} </TabItemsDirective> </TabComponent> ); } ``` ## Common Patterns ### Pattern 1: Styled Tabs with Icons ```jsx <TabComponent className="e-fill"> <TabItemsDirective> <TabItemDirective header={{ text: 'Home', iconCss: 'e-icons e-home' }} content="Home content" /> <TabItemDirective header={{ text: 'Profile', iconCss: 'e-icons e-user' }} content="Profile content" /> </TabItemsDirective> </TabComponent> ``` ### Pattern 2: Vertical Tabs on the Left ```jsx <TabComponent headerPlacement="Left"> <TabItemsDirective> <TabItemDirective header={{ text: 'Tab 1' }} content="Content 1" /> <TabItemDirective header={{ text: 'Tab 2' }} content="Content 2" /> </TabItemsDirective> </TabComponent> ``` ### Pattern 3: Lazy-Loaded Content (Default) ```jsx <TabComponent> <TabItemsDirective> <TabItemDirective header={{ text: 'Lazy Tab' }} content={() => <ExpensiveComponent />} /> </TabItemsDirective> </TabComponent> ``` ### Pattern 4: Draggable Tabs ```jsx <TabComponent allowDragAndDrop={true}> <TabItemsDirective> <TabItemDirective header={{ text: 'Tab 1' }} content="Content 1" /> <TabItemDirective header={{ text: 'Tab 2' }} content="Content 2" /> </TabItemsDirective> </TabComponent> ``` ## Key Properties Overview | Property | Type | Default | Purpose | |----------|------|---------|---------| | `headerPlacement` | String | `'Top'` | Position of tab headers: `Top`, `Bottom`, `Left`, `Right` | | `overflowMode` | String | `'Scrollable'` | Overflow handling: `Scrollable` or `Popup` | | `loadOn` | String | `'Demand'` | Content rendering: `Demand`, `Dynamic`, or `Init` | | `allowDragAndDrop` | Boolean | `false` | Enable tab reordering via drag and drop | | `showCloseButton` | Boolean | `false` | Display close button on tab headers | | `locale` | String | `'en-US'` | Localization culture code (e.g., `'fr-FR'`) | | `width` | String/Number | `'100%'` | Tab container width | | `height` | String/Number | `'auto'` | Tab container height | | `heightAdjustMode` | String | `'Content'` | Height adjustment mode: `None`, `Auto`, `Content`, `Fill` | | `selectedItem` | Number | `0` | Index of the active tab | | `enablePersistence` | Boolean | `false` | Persist selected tab state across reloads | | `enableHtmlSanitizer` | Boolean | `true` | Sanitize HTML content for security | | `cssClass` | String | `''` | Custom CSS classes to apply to component | | `enableRtl` | Boolean | `false` | Enable right-to-left layout | | `scrollStep` | Number | `null` | Distance to scroll when using scroll arrows | | `reorderActiveTab` | Boolean | `true` | Reorder to show active tab in header area | | `clearTemplates` | Boolean | `true` | Clear templates when items change dynamically | | `dragArea` | String | `null` | Restrict drag area for tab reordering | | `swipeMode` | String | `'Both'` | Swipe detection: `Both`, `Touch`, `Mouse`, `None` | | `animation` | TabAnimationSettingsModel | Default | Animation settings for tab transitions | ## Methods & API Reference ### addTab(items, index) Adds new items to the Tab component. The items are inserted at the specified index. **Parameters:** - `items` - Array of `TabItemModel` objects to add - `index` (optional) - Position where items should be inserted. Default is 0. **Returns:** `void` **Example:** ```jsx import React, { useRef } from 'react'; import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations'; export default function AddTabExample() { const tabRef = useRef(null); const handleAddTab = () => { const newItems = [ { header: { text: 'New Tab' }, content: 'This is dynamically added content' } ]; // Add at the end (index 2 if there are 2 existing tabs) tabRef.current.addTab(newItems, 2); }; return ( <div> <button onClick={handleAddTab}>Add Tab</button> <TabComponent ref={tabRef}> <TabItemsDirective> <TabItemDirective header={{ text: 'Tab 1' }} content="Content 1" /> <TabItemDirective header={{ text: 'Tab 2' }} content="Content 2" /> </TabItemsDirective> </TabComponent> </div> ); } ``` ### removeTab(index) Removes a tab item at the specified index. **Parameters:** - `index` - The index of the tab to remove **Returns:** `void` **Example:** ```jsx import React, { useRef } from 'react'; import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations'; export default function RemoveTabExample() { const tabRef = useRef(null); const handleRemoveTab = (tabIndex) => { tabRef.current.removeTab(tabIndex); }; return ( <div> <button onClick={() => handleRemoveTab(1)}>Remove Tab 2</button> <TabComponent ref={tabRef} showCloseButton={true}> <TabItemsDirective> <TabItemDirective header={{ text: 'Tab 1' }} content="Content 1" /> <TabItemDirective header={{ text: 'Tab 2' }} content="Content 2" /> <TabItemDirective header={{ text: 'Tab 3' }} content="Content 3" /> </TabItemsDirective> </TabComponent> </div> ); } ``` ### select(args, event) Selects a tab by index or DOM element. Programmatically switches to a different tab. **Parameters:** - `args` - Index (number) or HTMLElement of the tab to select - `event` (optional) - DOM event object **Returns:** `void` **Example:** ```jsx import React, { useRef } from 'react'; import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations'; export default function SelectTabExample() { const tabRef = useRef(null); const handleSelectTab = (index) => { tabRef.current.select(index); }; return ( <div> <div> <button onClick={() => handleSelectTab(0)}>Select Tab 1</button> <button onClick={() => handleSelectTab(1)}>Select Tab 2</button> <button onClick={() => handleSelectTab(2)}>Select Tab 3</button> </div> <TabComponent ref={tabRef}> <TabItemsDirective> <TabItemDirective header={{ text: 'Tab 1' }} content="Content 1" /> <TabItemDirective header={{ text: 'Tab 2' }} content="Content 2" />