Tabs
Examples
Basic tabs
The TabSet
and Tab
components are available from the @jutro/components
package. The Tab
component can only be placed inside a TabSet
component. Tab
requires to have an id
set.
import React from 'react';
import { TabSet, Tab } from '@jutro/components/';
export const BasicTabs = () => {
return (
<TabSet activeTab="tab-1">
<Tab
heading="Tab heading 1"
id="tab-1"
>
Tab 1 content
</Tab>
<Tab
heading="Tab heading 2"
id="tab-2"
>
Tab 2 content
</Tab>
<Tab
heading="Tab heading 3"
id="tab-3"
>
Tab 3 content
</Tab>
<Tab
heading="Tab heading 4"
id="tab-4"
>
Tab 4 content
</Tab>
</TabSet>
);
};
Tabs status examples
You can make a tab visible or not using the visible
prop. In this example, the third tab is not visible, but when you click on the first tab, the onTabChange
prop calls the function handleTabChange
and makes the third tab visible.
Additionally, the second tab is disabled using the disabled
prop.
import React, { useState } from 'react';
import { TabSet, Tab } from '@jutro/components/';
export const StatusTabs = () => {
const [isTab3Visible, setIsTab3Visible] = useState(false);
const [activeTab, setActiveTab] = useState('tab-4');
const handleTabChange = (tabId) => {
setActiveTab(tabId);
setIsTab3Visible(tabId === 'tab-1' || tabId === 'tab-3');
};
return (
<TabSet
defaultActiveTab="tab-4"
activeTab={activeTab}
onTabChange={handleTabChange}
>
<Tab
heading="Tab heading 1"
id="tab-1"
>
Tab 1 content
</Tab>
<Tab
heading="Disabled tab"
id="tab-2"
disabled
>
Tab 2 content
</Tab>
<Tab
heading="Hidden tab"
id="tab-3"
visible={isTab3Visible}
>
This tab is only visible after clicking on the fist tab.
</Tab>
<Tab
heading="Tab heading 4"
id="tab-4"
>
Click on the first tab to enable the hidden tab.
</Tab>
</TabSet>
);
};
Nested tabs and overflow
You can include a TabSet
component inside a Tab
to nest a new set of tabs.
When the width of the tabs is greater that the container, the tabs overflow automatically.
import React from 'react';
import { TabSet, Tab } from '@jutro/components/';
export const NestedOverflowTabs = () => {
return (
<div style={{ width: '600px' }}>
<TabSet activeTab="tab-1">
<Tab
heading="Tab heading 1"
id="tab-1"
>
<p>Here are some nested tabs:</p>
<TabSet activeTab="ntab-1">
<Tab
heading="Nested Tab heading 1"
id="ntab-1"
>
Nested Tab 1 content
</Tab>
<Tab
heading="Nested Tab heading 2"
id="ntab-2"
>
Nested Tab 2 content
</Tab>
</TabSet>
</Tab>
<Tab
heading="Tab heading 2"
id="tab-2"
>
Tab 2 content
</Tab>
<Tab
heading="Tab heading 3"
id="tab-3"
>
Tab 3 content
</Tab>
<Tab
heading="Tab heading 4"
id="tab-4"
>
Tab 4 content
</Tab>
<Tab
heading="Tab heading 5"
id="tab-5"
>
Tab 5 content
</Tab>
<Tab
heading="Tab heading 6"
id="tab-6"
>
Tab 6 content
</Tab>
<Tab
heading="Tab heading 7"
id="tab-7"
>
Tab 7 content
</Tab>
</TabSet>
</div>
);
};