Skip to main content

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.

   


Tab 1 content

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.

   


Click on the first tab to enable the hidden tab.

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.

   


Here are some nested tabs:


Nested Tab 1 content

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>
);
};
Legal and support information

Published: December 15, 2024 at 9:02 AM

© 2024 Guidewire Software, Inc.

This website uses cookies

We use cookies to analyze our traffic.