Tab
Tabs are used to organize content into different sections. They are useful when you have a lot of content and need to organize it into different sections.
If you want to use the tab component as a component, you can use the as
prop.
import { Tab } from '@fluid-design/fluid-ui';function Example() { return ( <Tab> <Tab.List className='w-full'> <Tab.ListItem>Tab 1</Tab.ListItem> <Tab.ListItem>Tab 2</Tab.ListItem> <Tab.ListItem>Tab 3</Tab.ListItem> </Tab.List> <Tab.Panels> <Tab.Panel> <Content title='Tab 1' /> </Tab.Panel> <Tab.Panel> <Content title='Tab 2' /> </Tab.Panel> <Tab.Panel> <Content title='Tab 3' /> </Tab.Panel> </Tab.Panels> </Tab> );}
You can programmatically activate a tab by using the selectedIndex
prop.
With this prop, you can control which tab is active. It's also possible
to use the onChange
prop to get the index of the selected tab.
import { Tab } from '@fluid-design/fluid-ui';import { useEffect, useState } from 'react';function Example() { const [activeTabIndex, setActiveTabIndex] = useState<number>(0); useEffect(() => { const interval = setInterval(() => { setActiveTabIndex((prev) => { if (prev === 2) { return 0; } return prev + 1; }); }, 3800); return () => clearInterval(interval); }, []); return ( <Tab onChange={setActiveTabIndex as any} selectedIndex={activeTabIndex as any} tabs={tabs} className='w-full' /> );}
You can customize the tab variant by using the shape
, size
and weight
props.
<Tab shape='square' // "square" | "round" | "pill" size='xl' // "xs" | "sm" | "base" | "lg" | "xl" weight='light' // "clear" | "normal" | "light"/>
The Tab
component is the wrapper component for the tab component.
Prop | Default | Description |
---|---|---|
as | div | 'div' | Component Component to render as |
tabs | undefined | Tab[] Array of tabs title: |
shape | round | 'square' | 'round' | 'pill' Shape of the tab |
size | base | 'xs' | 'sm' | 'base' | 'lg' | 'xl' Size of the tab |
weight | normal | 'clear' | 'normal' | 'light' Weight of the tab |
tabClassName | string Class name for the tab | |
tabActiveClassName | string Class name for the active tab | |
tabInactiveClassName | string Class name for the inactive tab | |
tabPanelClassName | string Class name for the tab panel | |
onChange | undefined | (index: number) => void Callback when the tab is changed |
selectedIndex | undefined | number Index of the selected tab |
The Tab.List
component is the wrapper component for the tab list.
Prop | Default | Description |
---|---|---|
as | div | 'div' | Component Component to render as |
shape | round | 'square' | 'round' | 'pill' Shape of the tab |
size | base | 'xs' | 'sm' | 'base' | 'lg' | 'xl' Size of the tab |
weight | normal | 'clear' | 'normal' | 'light' Weight of the tab |
className | `` | string Class name for the tab list |
tabClassName | string Class name for the tab | |
tabActiveClassName | string Class name for the active tab | |
tabInactiveClassName | string Class name for the inactive tab |
The Tab.ListItem
component is the wrapper component for the tab list item.
Prop | Default | Description |
---|---|---|
title | string | { text?: string; iconStart?: React.ReactNode | { (props): JSX.Element } } Title of the tab | |
as | div | 'div' | Component Component to render as |
shape | round | 'square' | 'round' | 'pill' Shape of the tab |
size | base | 'xs' | 'sm' | 'base' | 'lg' | 'xl' Size of the tab |
weight | normal | 'clear' | 'normal' | 'light' Weight of the tab |
className | string Class name for the tab list item | |
tabClassName | string Class name for the tab | |
tabActiveClassName | string Class name for the active tab | |
tabInactiveClassName | string Class name for the inactive tab |
The Tab.Panels
component is the wrapper component for the tab panel.
Prop | Default | Description |
---|---|---|
className | string Class name for the tab panels |
The Tab.Panel
component is the wrapper component for the tab panel.
Prop | Default | Description |
---|---|---|
tabPanelClassName | string Class name for the tab panel |