Overview
The Tabs component provides a simple tab interface for navigating between different content sections.
Basic Usage
import { NSTabs } from '@newtonschool/grauity';
import { useState } from 'react';
function MyComponent() {
const [activeTab, setActiveTab] = useState(0);
return (
<>
<NSTabs
tabItems={['Weekly', 'Monthly', 'Yearly']}
initialActiveTab={activeTab}
onTabFocusChange={(index) => setActiveTab(index)}
/>
{activeTab === 0 && <div>Weekly content</div>}
{activeTab === 1 && <div>Monthly content</div>}
{activeTab === 2 && <div>Yearly content</div>}
</>
);
}
tabItems
React.ReactNode[]
required
Array of tab items to be rendered. Each item can be any React node (string, element, etc.).
Callback function called when the focused tab changes.Signature: (tabIndex: number) => void
Index of the tab that should be initially focused.
Background color for the tab container.
Background color for the active/focused tab.
Text color for the active/focused tab.
Default text color for inactive tabs.
Additional CSS class name for styling.
String Tabs
<Tabs
tabItems={['Tab 1', 'Tab 2', 'Tab 3']}
onTabFocusChange={(index) => console.log('Tab changed:', index)}
/>
With Custom Components
<Tabs
tabItems={[
<span><NSIcon name="calendar" /> Weekly</span>,
<span><NSIcon name="chart" /> Monthly</span>,
]}
onTabFocusChange={(index) => handleTabChange(index)}
/>
Custom Colors
<Tabs
tabItems={['Design', 'Development', 'Marketing']}
backgroundColor="#f5f5f5"
focusBackgroundColor="#1976d2"
focusColor="#ffffff"
color="#666666"
/>
Controlled Tabs
function ControlledTabs() {
const [currentTab, setCurrentTab] = useState(0);
return (
<div>
<Tabs
tabItems={['Profile', 'Settings', 'Notifications']}
initialActiveTab={currentTab}
onTabFocusChange={setCurrentTab}
/>
<Button onClick={() => setCurrentTab(1)}>
Go to Settings
</Button>
<div>
{currentTab === 0 && <ProfileContent />}
{currentTab === 1 && <SettingsContent />}
{currentTab === 2 && <NotificationsContent />}
</div>
</div>
);
}
Styled Container
<div style={{ width: '400px' }}>
<Tabs
tabItems={['Option A', 'Option B', 'Option C']}
className="custom-tabs"
/>
</div>