Developer Try resizing the page to see how the tabs adjust. If the text in a tab is too long, it will be truncated with an ellipsis. You can also place the TabPanel.Item within other components.
INFO
Make sure to provide a tooltip with full text for tabs with text truncated with an ellipsis.
TabPanel item with addons
You can add icons, badges, and counters as addons to the left or right of the text in the item.
tsx
import React from 'react';
import TabPanel from 'intergalactic/tab-panel';
import FacebookM from 'intergalactic/icon/Facebook/m';
import InstagramM from 'intergalactic/icon/Instagram/m';
import TwitterM from 'intergalactic/icon/Twitter/m';
import Badge from 'intergalactic/badge';
const Demo = () => {
const [value, setValue] = React.useState(1);
return (
<>
<TabPanel value={value} onChange={setValue} aria-label='Social network reports'>
<TabPanel.Item value={1} aria-controls='tab-panel-1'>
<TabPanel.Item.Addon>
<FacebookM />
</TabPanel.Item.Addon>
<TabPanel.Item.Text>Facebook</TabPanel.Item.Text>
</TabPanel.Item>
<TabPanel.Item value={2} aria-controls='tab-panel-2'>
<TabPanel.Item.Addon>
<InstagramM />
</TabPanel.Item.Addon>
<TabPanel.Item.Text>Instagram</TabPanel.Item.Text>
<TabPanel.Item.Addon>
<Badge bg='green-400'>new</Badge>
</TabPanel.Item.Addon>
</TabPanel.Item>
<TabPanel.Item value={3} aria-controls='tab-panel-3'>
<TabPanel.Item.Addon>
<TwitterM />
</TabPanel.Item.Addon>
<TabPanel.Item.Text>Twitter</TabPanel.Item.Text>
</TabPanel.Item>
</TabPanel>
{
[
<div id='tab-panel-1' role='tabpanel' aria-labelledby='tab-label-1' tabIndex={-1}>
<h3>Facebook</h3>
<p>
It's where your aunt's cat has more followers than you, and your high school nemesis
still thinks they're relevant.
</p>
</div>,
<div
id='tab-panel-2'
aria-hidden='true'
role='tabpanel'
aria-labelledby='tab-label-2'
tabIndex={-1}
>
<h3>Instagram</h3>
<p>
It's where people spend hours perfecting their avocado toast just for a 'like', and
your explore page thinks you need therapy based on your search history.
</p>
</div>,
<div
id='tab-panel-3'
aria-hidden='true'
role='tabpanel'
aria-labelledby='tab-label-3'
tabIndex={-1}
>
<h3>Twitter</h3>
<p>
It's where 280 characters can start a revolution or a feud over pineapple on pizza,
and your timeline is a mix of breaking news and cat memes.
</p>
</div>,
][value - 1]
}
</>
);
};
export default Demo;import React from 'react';
import TabPanel from 'intergalactic/tab-panel';
import FacebookM from 'intergalactic/icon/Facebook/m';
import InstagramM from 'intergalactic/icon/Instagram/m';
import TwitterM from 'intergalactic/icon/Twitter/m';
import Badge from 'intergalactic/badge';
const Demo = () => {
const [value, setValue] = React.useState(1);
return (
<>
<TabPanel value={value} onChange={setValue} aria-label='Social network reports'>
<TabPanel.Item value={1} aria-controls='tab-panel-1'>
<TabPanel.Item.Addon>
<FacebookM />
</TabPanel.Item.Addon>
<TabPanel.Item.Text>Facebook</TabPanel.Item.Text>
</TabPanel.Item>
<TabPanel.Item value={2} aria-controls='tab-panel-2'>
<TabPanel.Item.Addon>
<InstagramM />
</TabPanel.Item.Addon>
<TabPanel.Item.Text>Instagram</TabPanel.Item.Text>
<TabPanel.Item.Addon>
<Badge bg='green-400'>new</Badge>
</TabPanel.Item.Addon>
</TabPanel.Item>
<TabPanel.Item value={3} aria-controls='tab-panel-3'>
<TabPanel.Item.Addon>
<TwitterM />
</TabPanel.Item.Addon>
<TabPanel.Item.Text>Twitter</TabPanel.Item.Text>
</TabPanel.Item>
</TabPanel>
{
[
<div id='tab-panel-1' role='tabpanel' aria-labelledby='tab-label-1' tabIndex={-1}>
<h3>Facebook</h3>
<p>
It's where your aunt's cat has more followers than you, and your high school nemesis
still thinks they're relevant.
</p>
</div>,
<div
id='tab-panel-2'
aria-hidden='true'
role='tabpanel'
aria-labelledby='tab-label-2'
tabIndex={-1}
>
<h3>Instagram</h3>
<p>
It's where people spend hours perfecting their avocado toast just for a 'like', and
your explore page thinks you need therapy based on your search history.
</p>
</div>,
<div
id='tab-panel-3'
aria-hidden='true'
role='tabpanel'
aria-labelledby='tab-label-3'
tabIndex={-1}
>
<h3>Twitter</h3>
<p>
It's where 280 characters can start a revolution or a feud over pineapple on pizza,
and your timeline is a mix of breaking news and cat memes.
</p>
</div>,
][value - 1]
}
</>
);
};
export default Demo;Disabled TabPanel item
Use disabled property to make <TabPanel.Item /> disabled. Always add Hint tooltip to explain why this item is disabled.
tsx
import React from 'react';
import TabPanel from 'intergalactic/tab-panel';
import { Hint } from 'intergalactic/tooltip';
const Demo = () => {
const [value, setValue] = React.useState(1);
return (
<>
<TabPanel value={value} onChange={setValue} aria-label='Social network reports'>
<TabPanel.Item value={1} aria-controls='tab-panel-1'>
<TabPanel.Item.Text>Normal tab</TabPanel.Item.Text>
</TabPanel.Item>
<Hint
title='Do not forget to add short text to explain why this item is disabled.'
placement='top'
role='tab'
>
<TabPanel.Item value={2} disabled>
<TabPanel.Item.Text>Disabled tab</TabPanel.Item.Text>
</TabPanel.Item>
</Hint>
</TabPanel>
{
[
<div id='tab-panel-1' role='tabpanel' aria-labelledby='tab-label-1' tabIndex={-1}>
<h3>Normal tab</h3>
<p>
Here you can place your content, or just leave it blank for that avant-garde
minimalist vibe.
</p>
</div>,
][value - 1]
}
</>
);
};
export default Demo;import React from 'react';
import TabPanel from 'intergalactic/tab-panel';
import { Hint } from 'intergalactic/tooltip';
const Demo = () => {
const [value, setValue] = React.useState(1);
return (
<>
<TabPanel value={value} onChange={setValue} aria-label='Social network reports'>
<TabPanel.Item value={1} aria-controls='tab-panel-1'>
<TabPanel.Item.Text>Normal tab</TabPanel.Item.Text>
</TabPanel.Item>
<Hint
title='Do not forget to add short text to explain why this item is disabled.'
placement='top'
role='tab'
>
<TabPanel.Item value={2} disabled>
<TabPanel.Item.Text>Disabled tab</TabPanel.Item.Text>
</TabPanel.Item>
</Hint>
</TabPanel>
{
[
<div id='tab-panel-1' role='tabpanel' aria-labelledby='tab-label-1' tabIndex={-1}>
<h3>Normal tab</h3>
<p>
Here you can place your content, or just leave it blank for that avant-garde
minimalist vibe.
</p>
</div>,
][value - 1]
}
</>
);
};
export default Demo;Manual tab activation
By default, tabs are switched manually when selected.
tsx
import React from 'react';
import TabPanel from 'intergalactic/tab-panel';
const Demo = () => {
const [value, setValue] = React.useState(1);
return (
<>
<TabPanel onChange={setValue} value={value} aria-label='Animals'>
<TabPanel.Item value={1} aria-controls='tab-panel-1'>
Cats
</TabPanel.Item>
<TabPanel.Item value={2} aria-controls='tab-panel-2'>
Dogs
</TabPanel.Item>
<TabPanel.Item value={3} aria-controls='tab-panel-3'>
Birds
</TabPanel.Item>
</TabPanel>
{
[
<div id='tab-panel-1' role='tabpanel' aria-labelledby='tab-label-1' tabIndex={-1}>
<h3>Cats</h3>
<p>
They are the only creatures that can simultaneously demand your attention and ignore
you completely, while plotting world domination from the top of the refrigerator.
</p>
</div>,
<div
id='tab-panel-2'
aria-hidden='true'
role='tabpanel'
aria-labelledby='tab-label-2'
tabIndex={-1}
>
<h3>Dogs</h3>
<p>
They are the eternal optimists who believe that every stranger is a potential friend
and every walk is an adventure, even if it's just to the mailbox.
</p>
</div>,
<div
id='tab-panel-3'
aria-hidden='true'
role='tabpanel'
aria-labelledby='tab-label-3'
tabIndex={-1}
>
<h3>Birds</h3>
<p>
They are the tiny dinosaurs who sing like they're auditioning for Broadway and have a
knack for leaving 'gifts' on freshly washed cars.
</p>
</div>,
][value - 1]
}
</>
);
};
export default Demo;import React from 'react';
import TabPanel from 'intergalactic/tab-panel';
const Demo = () => {
const [value, setValue] = React.useState(1);
return (
<>
<TabPanel onChange={setValue} value={value} aria-label='Animals'>
<TabPanel.Item value={1} aria-controls='tab-panel-1'>
Cats
</TabPanel.Item>
<TabPanel.Item value={2} aria-controls='tab-panel-2'>
Dogs
</TabPanel.Item>
<TabPanel.Item value={3} aria-controls='tab-panel-3'>
Birds
</TabPanel.Item>
</TabPanel>
{
[
<div id='tab-panel-1' role='tabpanel' aria-labelledby='tab-label-1' tabIndex={-1}>
<h3>Cats</h3>
<p>
They are the only creatures that can simultaneously demand your attention and ignore
you completely, while plotting world domination from the top of the refrigerator.
</p>
</div>,
<div
id='tab-panel-2'
aria-hidden='true'
role='tabpanel'
aria-labelledby='tab-label-2'
tabIndex={-1}
>
<h3>Dogs</h3>
<p>
They are the eternal optimists who believe that every stranger is a potential friend
and every walk is an adventure, even if it's just to the mailbox.
</p>
</div>,
<div
id='tab-panel-3'
aria-hidden='true'
role='tabpanel'
aria-labelledby='tab-label-3'
tabIndex={-1}
>
<h3>Birds</h3>
<p>
They are the tiny dinosaurs who sing like they're auditioning for Broadway and have a
knack for leaving 'gifts' on freshly washed cars.
</p>
</div>,
][value - 1]
}
</>
);
};
export default Demo;Automatic tab activation
You can set behavior='auto' on TabPanel to change the tab activation method to automatic.
tsx
import React from 'react';
import TabPanel from 'intergalactic/tab-panel';
const Demo = () => {
const [value, setValue] = React.useState(1);
return (
<>
<TabPanel onChange={setValue} value={value} behavior='auto' aria-label='Animals'>
<TabPanel.Item value={1} aria-controls='tab-panel-1'>
Cats
</TabPanel.Item>
<TabPanel.Item value={2} aria-controls='tab-panel-2'>
Dogs
</TabPanel.Item>
<TabPanel.Item value={3} aria-controls='tab-panel-3'>
Birds
</TabPanel.Item>
</TabPanel>
{
[
<div id='tab-panel-1' role='tabpanel' aria-labelledby='tab-label-1' tabIndex={-1}>
<h3>Cats</h3>
<p>
They are the only creatures that can simultaneously demand your attention and ignore
you completely, while plotting world domination from the top of the refrigerator.
</p>
</div>,
<div
id='tab-panel-2'
aria-hidden='true'
role='tabpanel'
aria-labelledby='tab-label-2'
tabIndex={-1}
>
<h3>Dogs</h3>
<p>
They are the eternal optimists who believe that every stranger is a potential friend
and every walk is an adventure, even if it's just to the mailbox.
</p>
</div>,
<div
id='tab-panel-3'
aria-hidden='true'
role='tabpanel'
aria-labelledby='tab-label-3'
tabIndex={-1}
>
<h3>Birds</h3>
<p>
They are the tiny dinosaurs who sing like they're auditioning for Broadway and have a
knack for leaving 'gifts' on freshly washed cars.
</p>
</div>,
][value - 1]
}
</>
);
};
export default Demo;import React from 'react';
import TabPanel from 'intergalactic/tab-panel';
const Demo = () => {
const [value, setValue] = React.useState(1);
return (
<>
<TabPanel onChange={setValue} value={value} behavior='auto' aria-label='Animals'>
<TabPanel.Item value={1} aria-controls='tab-panel-1'>
Cats
</TabPanel.Item>
<TabPanel.Item value={2} aria-controls='tab-panel-2'>
Dogs
</TabPanel.Item>
<TabPanel.Item value={3} aria-controls='tab-panel-3'>
Birds
</TabPanel.Item>
</TabPanel>
{
[
<div id='tab-panel-1' role='tabpanel' aria-labelledby='tab-label-1' tabIndex={-1}>
<h3>Cats</h3>
<p>
They are the only creatures that can simultaneously demand your attention and ignore
you completely, while plotting world domination from the top of the refrigerator.
</p>
</div>,
<div
id='tab-panel-2'
aria-hidden='true'
role='tabpanel'
aria-labelledby='tab-label-2'
tabIndex={-1}
>
<h3>Dogs</h3>
<p>
They are the eternal optimists who believe that every stranger is a potential friend
and every walk is an adventure, even if it's just to the mailbox.
</p>
</div>,
<div
id='tab-panel-3'
aria-hidden='true'
role='tabpanel'
aria-labelledby='tab-label-3'
tabIndex={-1}
>
<h3>Birds</h3>
<p>
They are the tiny dinosaurs who sing like they're auditioning for Broadway and have a
knack for leaving 'gifts' on freshly washed cars.
</p>
</div>,
][value - 1]
}
</>
);
};
export default Demo;Custom indents
Since the TabPanel component doesn't have default margins at the edges, to make it fill the entire width of its parent block (which may have its own margins), you can set the desired padding and margin for the TabPanel component like this:
typescript
<Box p={5}>
<TabPanel px={5} mx="-20px" />
</Box><Box p={5}>
<TabPanel px={5} mx="-20px" />
</Box>