@kodiak-ui/tabs
v0.2.42
Published
Tabs hook and components
Downloads
13
Keywords
Readme
Kodiak UI Tabs
Easily render fully composable and styleable tabs in your UI.
npm install @kodiak-ui/tabs
yarn add @kodiak-ui/tabs
function TabsExample() {
const tabsData = React.useMemo(function generateTabs() {
return [
{
tab: 'Tab 1',
panel: (
<div>
<h3>Testing</h3>
</div>
),
},
{ tab: 'Tab 2', panel: 'Tab 2' },
{ tab: 'Tab 3', panel: 'Tab 3' },
{ tab: 'Tab 4', panel: 'Tab 4' },
]
}, [])
const { tabs, tabPanels, selectedIndex } = useTabs({
tabs: tabsData,
})
return (
<Tabs sx={{ border: '1px solid', borderColor: 'gray.2' }}>
<TabList aria-label="Describes the tabs">
{tabs.map((props, index) => (
<Tab
key={index}
{...props}
sx={{
color: selectedIndex === index ? 'primary' : 'text',
position: 'relative',
'::after': {
bg: selectedIndex === index ? 'primary' : 'muted',
bottom: 0,
content: '""',
height: selectedIndex === index ? '2px' : '1px',
left: 0,
position: 'absolute',
right: 0,
width: '100%',
},
}}
/>
))}
</TabList>
{tabPanels.map((props, index) => (
<TabPanel key={index} {...props} sx={{ p: 4 }} />
))}
</Tabs>
)
}