TabGroup
Organismrole="tablist" / role="tab" / role="tabpanel" ARIA pattern. Ok tuşları ile navigasyon, tabIndex=-1 aktif olmayan tablar için.
Profile settings content.
Security settings content.
Billing settings content.
<TabGroup
label="Account settings"
tabs={[
{ id: 'profile', label: 'Profile', content: <ProfileSettings /> },
{ id: 'security', label: 'Security', content: <SecuritySettings /> },
{ id: 'billing', label: 'Billing', content: <BillingSettings /> },
]}
/>Overview content.
Analytics content.
Reports content.
Settings disabled.
<TabGroup tabs={[
{ id: 'overview', label: 'Overview', icon: <BarChart2 />, content: ... },
{ id: 'analytics', label: 'Analytics', icon: <TrendingUp />, badge: <Badge>New</Badge>, content: ... },
{ id: 'settings', label: 'Settings', disabled: true, content: ... },
]} />Always mounted (initial).
Mount log: Tab 1 mounted
// With lazy=true, panel content is only rendered when first activated:
<TabGroup lazy tabs={[
{ id: 'heavy', label: 'Heavy', content: <HeavyComponent /> },
]} />