Custom content
Use Content to override the default content component.
You can pass any properties in each tab array item and access them through the data prop passed to the Content component.
Tab 1
Tab 2
Tab 3
One
Body of tab one
import React from 'react';
import Tabs from '@atlaskit/tabs';
import { TabContentComponentProvided } from '@atlaskit/tabs/types';
import { Content } from '../shared';
export const tabs = [
{
label: 'Tab 1',
heading: 'One',
body: 'Body of tab one',
},
{
label: 'Tab 2',
heading: 'Two',
body: 'Body of tab two',
},
{
label: 'Tab 3',
heading: 'Three',
body: 'Body of tab three',
},
];
const CustomContent = ({ data, elementProps }: TabContentComponentProvided) => (
<Content {...elementProps}>
<span>{data.heading}</span>
<p>{data.body}</p>
</Content>
);
const TabContentCustomComponentExample = () => (
<Tabs components={{ Content: CustomContent }} tabs={tabs} />
);
export default TabContentCustomComponentExample;