Syncfusion React Tabs

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

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

<TabComponent headerPlacement="Left">  <TabItemsDirective>    <TabItemDirective header={{ text: 'Tab 1' }} content="Content 1" />    <TabItemDirective header={{ text: 'Tab 2' }} content="Content 2" />  </TabItemsDirective></TabComponent>

<TabComponent>  <TabItemsDirective>    <TabItemDirective       header={{ text: 'Lazy Tab' }}       content={() => <ExpensiveComponent />}     />  </TabItemsDirective></TabComponent>

<TabComponent allowDragAndDrop={true}>  <TabItemsDirective>    <TabItemDirective header={{ text: 'Tab 1' }} content="Content 1" />    <TabItemDirective header={{ text: 'Tab 2' }} content="Content 2" />  </TabItemsDirective></TabComponent>

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

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

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" />          <TabItemDirective header={{ text: 'Tab 3' }} content="Content 3" />        </TabItemsDirective>      </TabComponent>    </div>  );}

import React, { useRef } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function EnableTabExample() {  const tabRef = useRef(null);
  const toggleTabEnabled = (index) => {    const isCurrentlyEnabled = !tabRef.current.items[index].isDisabled;    tabRef.current.enableTab(index, isCurrentlyEnabled);  };
  return (    <div>      <button onClick={() => toggleTabEnabled(1)}>Toggle Tab 2 Enable</button>      <TabComponent ref={tabRef}>        <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>  );}

import React, { useRef, useState } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function HideTabExample() {  const tabRef = useRef(null);  const [visibleTabs, setVisibleTabs] = useState([true, true, true]);
  const toggleTabVisibility = (index) => {    const newVisibleTabs = [...visibleTabs];    newVisibleTabs[index] = !newVisibleTabs[index];    setVisibleTabs(newVisibleTabs);    tabRef.current.hideTab(index, !newVisibleTabs[index]);  };
  return (    <div>      <div>        <button onClick={() => toggleTabVisibility(0)}>          Toggle Tab 1 Visibility        </button>        <button onClick={() => toggleTabVisibility(1)}>          Toggle Tab 2 Visibility        </button>      </div>      <TabComponent ref={tabRef}>        <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>  );}

import React, { useRef } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function GetItemIndexExample() {  const tabRef = useRef(null);
  const findTabIndex = () => {    const itemId = 'tab_2';    const index = tabRef.current.getItemIndex(itemId);    console.log(`Tab with ID '${itemId}' is at index: ${index}`);  };
  return (    <div>      <button onClick={findTabIndex}>Find Tab Index</button>      <TabComponent ref={tabRef}>        <TabItemsDirective>          <TabItemDirective id="tab_1" header={{ text: 'Tab 1' }} content="Content 1" />          <TabItemDirective id="tab_2" header={{ text: 'Tab 2' }} content="Content 2" />          <TabItemDirective id="tab_3" header={{ text: 'Tab 3' }} content="Content 3" />        </TabItemsDirective>      </TabComponent>    </div>  );}

import React, { useRef } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function RefreshTabExample() {  const tabRef = useRef(null);
  const handleRefresh = () => {    tabRef.current.refresh();    console.log('Tab component refreshed');  };
  return (    <div>      <button onClick={handleRefresh}>Refresh 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>  );}

import React, { useRef } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function RefreshActiveTabExample() {  const tabRef = useRef(null);
  const handleRefreshActive = () => {    tabRef.current.refreshActiveTab();    console.log('Active tab content refreshed');  };
  return (    <div>      <button onClick={handleRefreshActive}>Refresh Active Tab</button>      <TabComponent ref={tabRef}>        <TabItemsDirective>          <TabItemDirective header={{ text: 'Tab 1' }} content="Content 1" />          <TabItemDirective header={{ text: 'Tab 2' }} content="Dynamically updated content" />        </TabItemsDirective>      </TabComponent>    </div>  );}

import React, { useRef } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function RefreshBorderExample() {  const tabRef = useRef(null);
  const handleRefreshBorder = () => {    tabRef.current.refreshActiveTabBorder();  };
  return (    <div>      <button onClick={handleRefreshBorder}>Refresh Border</button>      <TabComponent ref={tabRef}>        <TabItemsDirective>          <TabItemDirective header={{ text: 'Tab 1' }} content="Content 1" />          <TabItemDirective header={{ text: 'Tab 2' }} content="Content 2" />        </TabItemsDirective>      </TabComponent>    </div>  );}

import React, { useRef, useState } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function RefreshOverflowExample() {  const tabRef = useRef(null);  const [tabCount, setTabCount] = useState(3);
  const handleWindowResize = () => {    if (tabRef.current) {      tabRef.current.refreshOverflow();    }  };
  React.useEffect(() => {    window.addEventListener('resize', handleWindowResize);    return () => window.removeEventListener('resize', handleWindowResize);  }, []);
  const addMoreTabs = () => {    const newTab = {      header: { text: `Tab ${tabCount + 1}` },      content: `Content ${tabCount + 1}`    };    tabRef.current.addTab([newTab]);    setTabCount(tabCount + 1);    tabRef.current.refreshOverflow();  };
  return (    <div>      <button onClick={addMoreTabs}>Add Tab & Refresh Overflow</button>      <TabComponent ref={tabRef} width="100%">        <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>  );}

import React, { useRef, useState } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function DisableTabExample() {  const tabRef = useRef(null);  const [isDisabled, setIsDisabled] = useState(false);
  const toggleDisable = () => {    tabRef.current.disable(!isDisabled);    setIsDisabled(!isDisabled);  };
  return (    <div>      <button onClick={toggleDisable}>        {isDisabled ? 'Enable' : 'Disable'} Tab Component      </button>      <TabComponent ref={tabRef}>        <TabItemsDirective>          <TabItemDirective header={{ text: 'Tab 1' }} content="Content 1" />          <TabItemDirective header={{ text: 'Tab 2' }} content="Content 2" />        </TabItemsDirective>      </TabComponent>    </div>  );}

import React, { useRef } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function DestroyTabExample() {  const tabRef = useRef(null);
  const handleDestroy = () => {    tabRef.current.destroy();    console.log('Tab component destroyed');  };
  return (    <div>      <button onClick={handleDestroy}>Destroy 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>  );}

import React, { useRef, useState } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function SelectedEventExample() {  const tabRef = useRef(null);  const [selectedIndex, setSelectedIndex] = useState(0);
  const handleTabSelected = (args) => {    console.log('Tab selected:', {      selectedIndex: args.selectedIndex,      previousIndex: args.previousIndex,      isInteracted: args.isInteracted,      isSwiped: args.isSwiped    });    setSelectedIndex(args.selectedIndex);  };
  return (    <div>      <p>Currently selected tab index: {selectedIndex}</p>      <TabComponent ref={tabRef} selected={handleTabSelected}>        <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>  );}

import React, { useRef } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function SelectingEventExample() {  const handleTabSelecting = (args) => {    // Prevent selection of tab at index 1    if (args.selectedIndex === 1) {      console.log('Tab 2 selection prevented');      args.cancel = true;    }  };
  return (    <TabComponent selecting={handleTabSelecting}>      <TabItemsDirective>        <TabItemDirective header={{ text: 'Tab 1' }} content="Content 1" />        <TabItemDirective header={{ text: 'Tab 2 (Locked)' }} content="Content 2" />        <TabItemDirective header={{ text: 'Tab 3' }} content="Content 3" />      </TabItemsDirective>    </TabComponent>  );}

import React, { useRef } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function AddedEventExample() {  const tabRef = useRef(null);
  const handleTabAdded = (args) => {    console.log('Tabs added:', args.addedItems.length);    console.log('First added item header:', args.addedItems[0].header.text);  };
  const handleAddTab = () => {    const newItems = [      {        header: { text: 'Newly Added Tab' },        content: 'This tab was added dynamically'      }    ];    tabRef.current.addTab(newItems);  };
  return (    <div>      <button onClick={handleAddTab}>Add Tab</button>      <TabComponent ref={tabRef} added={handleTabAdded}>        <TabItemsDirective>          <TabItemDirective header={{ text: 'Tab 1' }} content="Content 1" />          <TabItemDirective header={{ text: 'Tab 2' }} content="Content 2" />        </TabItemsDirective>      </TabComponent>    </div>  );}

import React, { useRef } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function AddingEventExample() {  const tabRef = useRef(null);  const maxTabs = 5;
  const handleTabAdding = (args) => {    const totalTabs = tabRef.current.items.length + args.addedItems.length;    if (totalTabs > maxTabs) {      console.log(`Cannot exceed ${maxTabs} tabs`);      args.cancel = true;    }  };
  const handleAddTab = () => {    const newItems = [      {        header: { text: `Tab ${tabRef.current.items.length + 1}` },        content: 'New content'      }    ];    tabRef.current.addTab(newItems);  };
  return (    <div>      <button onClick={handleAddTab}>Add Tab (Max 5)</button>      <TabComponent ref={tabRef} adding={handleTabAdding}>        <TabItemsDirective>          <TabItemDirective header={{ text: 'Tab 1' }} content="Content 1" />          <TabItemDirective header={{ text: 'Tab 2' }} content="Content 2" />        </TabItemsDirective>      </TabComponent>    </div>  );}

import React, { useRef, useState } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function RemovedEventExample() {  const tabRef = useRef(null);  const [removedCount, setRemovedCount] = useState(0);
  const handleTabRemoved = (args) => {    console.log(`Tab at index ${args.index} was removed`);    setRemovedCount(removedCount + 1);  };
  const handleRemoveTab = (index) => {    tabRef.current.removeTab(index);  };
  return (    <div>      <p>Tabs removed: {removedCount}</p>      <button onClick={() => handleRemoveTab(0)}>Remove First Tab</button>      <TabComponent ref={tabRef} removed={handleTabRemoved}>        <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>  );}

import React, { useRef } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function RemovingEventExample() {  const handleTabRemoving = (args) => {    const confirmed = window.confirm('Are you sure you want to remove this tab?');    if (!confirmed) {      args.cancel = true;    }  };
  return (    <TabComponent removing={handleTabRemoving} 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>  );}

import React, { useRef } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function OnDragStartExample() {  const handleDragStart = (args) => {    // Prevent dragging the first tab (index 0)    if (args.index === 0) {      args.cancel = true;      console.log('First tab cannot be dragged');    }  };
  return (    <TabComponent allowDragAndDrop={true} onDragStart={handleDragStart}>      <TabItemsDirective>        <TabItemDirective header={{ text: 'Tab 1 (Locked)' }} content="Content 1" />        <TabItemDirective header={{ text: 'Tab 2' }} content="Content 2" />        <TabItemDirective header={{ text: 'Tab 3' }} content="Content 3" />      </TabItemsDirective>    </TabComponent>  );}

import React, { useRef, useState } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function DraggingEventExample() {  const [dragStatus, setDragStatus] = useState('');
  const handleDragging = (args) => {    setDragStatus(`Dragging tab at index ${args.index}`);  };
  return (    <div>      <p>Drag status: {dragStatus}</p>      <TabComponent allowDragAndDrop={true} dragging={handleDragging}>        <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>  );}

import React, { useRef, useState } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function DraggedEventExample() {  const [dropMessage, setDropMessage] = useState('');
  const handleDragged = (args) => {    setDropMessage(`Tab dropped at new position. Index: ${args.index}`);    console.log('Tab reordered successfully');  };
  return (    <div>      <p>{dropMessage}</p>      <TabComponent allowDragAndDrop={true} dragged={handleDragged}>        <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>  );}

import React, { useRef } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function CreatedEventExample() {  const tabRef = useRef(null);
  const handleCreated = () => {    console.log('Tab component created and initialized');    console.log('Total tabs:', tabRef.current.items.length);  };
  return (    <TabComponent ref={tabRef} created={handleCreated}>      <TabItemsDirective>        <TabItemDirective header={{ text: 'Tab 1' }} content="Content 1" />        <TabItemDirective header={{ text: 'Tab 2' }} content="Content 2" />      </TabItemsDirective>    </TabComponent>  );}

import React, { useRef, useState } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function DestroyedEventExample() {  const [showTab, setShowTab] = useState(true);
  const handleDestroyed = () => {    console.log('Tab component destroyed');    alert('Tab component has been removed from DOM');  };
  return (    <div>      <button onClick={() => setShowTab(!showTab)}>        {showTab ? 'Destroy' : 'Create'} Tab      </button>      {showTab && (        <TabComponent destroyed={handleDestroyed}>          <TabItemsDirective>            <TabItemDirective header={{ text: 'Tab 1' }} content="Content 1" />            <TabItemDirective header={{ text: 'Tab 2' }} content="Content 2" />          </TabItemsDirective>        </TabComponent>      )}    </div>  );}

import React, { useRef } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function AnimationExample() {  const tabRef = useRef(null);
  const animationSettings = {    previous: { effect: 'SlideLeftIn', duration: 600, easing: 'ease' },    next: { effect: 'SlideRightIn', duration: 600, easing: 'ease' }  };
  return (    <TabComponent ref={tabRef} animation={animationSettings}>      <TabItemsDirective>        <TabItemDirective header={{ text: 'Twitter' }} content="Twitter is an online social networking service..." />        <TabItemDirective header={{ text: 'Facebook' }} content="Facebook is an online social networking service..." />        <TabItemDirective header={{ text: 'WhatsApp' }} content="WhatsApp Messenger is a proprietary cross-platform instant messaging client..." />      </TabItemsDirective>    </TabComponent>  );}

import React from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function NoAnimationExample() {  const animationSettings = {    previous: { effect: 'None' },    next: { effect: 'None' }  };
  return (    <TabComponent animation={animationSettings}>      <TabItemsDirective>        <TabItemDirective header={{ text: 'Tab 1' }} content="Content 1" />        <TabItemDirective header={{ text: 'Tab 2' }} content="Content 2" />      </TabItemsDirective>    </TabComponent>  );}

import React from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function HtmlSanitizationExample() {  return (    <div>      {/* Sanitization enabled (default) - malicious scripts are removed */}      <h2>With Sanitization (Safe)</h2>      <TabComponent enableHtmlSanitizer={true}>        <TabItemsDirective>          <TabItemDirective             header={{ text: 'Safe Content' }}             content="<b>Bold text</b> - This is safe HTML"          />          <TabItemDirective             header={{ text: 'Dangerous Script' }}             content="<img src=x onerror='alert(\"XSS\")' /> - Script will be removed"          />        </TabItemsDirective>      </TabComponent>
      {/* Sanitization disabled - use only with trusted content */}      <h2>Without Sanitization (Use with Caution)</h2>      <TabComponent enableHtmlSanitizer={false}>        <TabItemsDirective>          <TabItemDirective             header={{ text: 'Trusted Content Only' }}             content="<b>Only use when content is from trusted sources</b>"          />        </TabItemsDirective>      </TabComponent>    </div>  );}

import React from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function PersistenceExample() {  return (    <div>      <p>        Select a different tab and refresh the page.         The previously selected tab will be restored.      </p>      <TabComponent enablePersistence={true} selectedItem={0}>        <TabItemsDirective>          <TabItemDirective header={{ text: 'Twitter' }} content="Twitter is an online social networking service that enables users to send and read short 140-character messages..." />          <TabItemDirective header={{ text: 'Facebook' }} content="Facebook is an online social networking service headquartered in Menlo Park, California..." />          <TabItemDirective header={{ text: 'WhatsApp' }} content="WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones..." />        </TabItemsDirective>      </TabComponent>    </div>  );}

import React from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function SwipeModeExample() {  return (    <div>      <h3>Form Tab - Swipe Disabled to Prevent Data Loss</h3>      <TabComponent heightAdjustMode='Auto' swipeMode='None'>        <TabItemsDirective>          <TabItemDirective             header={{ text: 'Personal Info' }}             content="Fill out your personal information without accidental swipes"          />          <TabItemDirective             header={{ text: 'Address' }}             content="Enter your address details"          />          <TabItemDirective             header={{ text: 'Confirmation' }}             content="Review and confirm your information"          />        </TabItemsDirective>      </TabComponent>
      <h3>Mobile Navigation - Touch Swipe Only</h3>      <TabComponent swipeMode='Touch'>        <TabItemsDirective>          <TabItemDirective             header={{ text: 'Twitter' }}             content="Twitter content - Swipe on mobile only"          />          <TabItemDirective             header={{ text: 'Facebook' }}             content="Facebook content - Swipe on mobile only"          />          <TabItemDirective             header={{ text: 'WhatsApp' }}             content="WhatsApp content - Swipe on mobile only"          />        </TabItemsDirective>      </TabComponent>    </div>  );}

import React from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function TouchSwipeExample() {  return (    <TabComponent swipeMode='Touch'>      <TabItemsDirective>        <TabItemDirective           header={{ text: 'Dashboard' }}           content="Dashboard content - Swipe available on touch devices"        />        <TabItemDirective           header={{ text: 'Analytics' }}           content="Analytics content"        />      </TabItemsDirective>    </TabComponent>  );}

import React from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function ScrollStepExample() {  const htmlContent = () => {    return <div>      HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages.    </div>;  };  const csharpContent = () => {    return <div>      C# is intended to be a simple, modern, general-purpose, object-oriented programming language.    </div>;  };  const javaContent = () => {    return <div>      Java is a set of computer software and specifications developed by Sun Microsystems.    </div>;  };  const vbNetContent = () => {    return <div>      The command-line compiler, VBC.EXE, is installed as part of the freeware .NET Framework SDK.    </div>;  };  const xamarinContent = () => {    return <div>      Xamarin is a software company created in May 2011 by the engineers that created Mono.    </div>;  };  const aspNetcontent = () => {    return <div>      ASP.NET is an open-source server-side web application framework designed for web development.    </div>;  };  const mvcContent = () => {    return <div>      The ASP.NET MVC is a web application framework developed by Microsoft.    </div>;  };  const jsContent = () => {    return <div>      JavaScript (JS) is an interpreted computer programming language.    </div>;  };
  return (    <div>      <h3>Tab Scroll Step: 50px per click</h3>      <p>Click the left/right navigation arrows - tabs scroll 50 pixels at a time</p>            <TabComponent height="250px" scrollStep={50}>        <TabItemsDirective>          <TabItemDirective header={{ text: 'HTML' }} content={htmlContent} />          <TabItemDirective header={{ text: 'C#' }} content={csharpContent} />          <TabItemDirective header={{ text: 'Java' }} content={javaContent} />          <TabItemDirective header={{ text: 'VB.Net' }} content={vbNetContent} />          <TabItemDirective header={{ text: 'Xamarin' }} content={xamarinContent} />          <TabItemDirective header={{ text: 'ASP.NET' }} content={aspNetcontent} />          <TabItemDirective header={{ text: 'ASP.NET MVC' }} content={mvcContent} />          <TabItemDirective header={{ text: 'JavaScript' }} content={jsContent} />        </TabItemsDirective>      </TabComponent>
      <h3>Tab Scroll Step: 100px per click (Faster)</h3>      <p>Larger scroll step for quicker tab navigation</p>            <TabComponent height="250px" scrollStep={100}>        <TabItemsDirective>          <TabItemDirective header={{ text: 'HTML' }} content={htmlContent} />          <TabItemDirective header={{ text: 'C#' }} content={csharpContent} />          <TabItemDirective header={{ text: 'Java' }} content={javaContent} />          <TabItemDirective header={{ text: 'VB.Net' }} content={vbNetContent} />          <TabItemDirective header={{ text: 'Xamarin' }} content={xamarinContent} />          <TabItemDirective header={{ text: 'ASP.NET' }} content={aspNetcontent} />          <TabItemDirective header={{ text: 'ASP.NET MVC' }} content={mvcContent} />          <TabItemDirective header={{ text: 'JavaScript' }} content={jsContent} />        </TabItemsDirective>      </TabComponent>    </div>  );}

import React from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';import './CustomTab.css';
export default function CustomCssExample() {  return (    <TabComponent cssClass="custom-tab-theme">      <TabItemsDirective>        <TabItemDirective header={{ text: 'Tab 1' }} content="Content 1" />        <TabItemDirective header={{ text: 'Tab 2' }} content="Content 2" />      </TabItemsDirective>    </TabComponent>  );}

import React from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function RTLExample() {  return (    <TabComponent enableRtl={true}>      <TabItemsDirective>        <TabItemDirective header={{ text: 'ملخص' }} content="محتوى في اللغة العربية" />        <TabItemDirective header={{ text: 'تفاصيل' }} content="المزيد من المحتوى" />        <TabItemDirective header={{ text: 'الإعدادات' }} content="إعدادات التطبيق" />      </TabItemsDirective>    </TabComponent>  );}

import React, { useRef } from 'react';import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
export default function AdvancedSettingsExample() {  const tabRef = useRef(null);
  const handleTabSelecting = (args) => {    console.log(`Switching from tab ${args.previousIndex} to tab ${args.selectedIndex}`);  };
  const animationSettings = {    previous: { effect: 'SlideLeftIn', duration: 500, easing: 'ease-out' },    next: { effect: 'SlideRightIn', duration: 500, easing: 'ease-out' }  };
  return (    <TabComponent      ref={tabRef}      headerPlacement="Top"      overflowMode="Scrollable"      enablePersistence={true}      enableHtmlSanitizer={true}      enableRtl={false}      cssClass="advanced-tab-demo"      animation={animationSettings}      heightAdjustMode="Auto"      selecting={handleTabSelecting}    >      <TabItemsDirective>        <TabItemDirective           header={{ text: 'Overview', iconCss: 'e-icons e-home' }}           content="Welcome to the overview tab"         />        <TabItemDirective           header={{ text: 'Profile', iconCss: 'e-icons e-user' }}           content="User profile information"         />        <TabItemDirective           header={{ text: 'Settings', iconCss: 'e-icons e-settings' }}           content="Application settings"         />      </TabItemsDirective>    </TabComponent>  );}