Tabs Component

The Tabs component creates an interactive interface that organizes content into separate, easily accessible sections. Each tab panel displays unique content while keeping your interface clean and focused.

Key Features

• Synchronized Groups: Link multiple tab sets together

• Accessibility: Full ARIA support and keyboard navigation

• Custom Styling: Extensive style customization options

Basic Usage

Create tabbed interfaces with the Tabs and TabItem components:

1
<Tabs>
2
    <TabItem label="First Tab">
3
        Content for the first tab
4
    </TabItem>
5
    <TabItem label="Second Tab">
6
        Content for the second tab
7
    </TabItem>
8
</Tabs>

Animation Types

The Tabs component supports two different animation types:

• fade (Default): Smoothly fades between tabs
• slide: Slides between tabs

Tabs Component API

Tabs Props

TabItem Props

Synchronized Tabs

Link multiple tab groups to switch together:

1
<Tabs syncKey="related-content">
2
    <TabItem label="Overview">First group content</TabItem>
3
    <TabItem label="Details">First group details</TabItem>
4
</Tabs>
5

6
<Tabs syncKey="related-content">
7
  <TabItem label="Overview">Second group content</TabItem>
8
  <TabItem label="Details">Second group details</TabItem>
9
</Tabs>

Custom Event Listeners

The Tabs component emits a tab-change event when selection changes:

Waiting for events to be emitted… (Click on the tabs to see the events)

1
// Listen for tab changes
2
const tabs = document.querySelector('tabs-wrapper');
3
tabs.addEventListener(TabsEventNames.Change, (event) => {
4
  const { id, tabId, syncKey } = event.detail;
5
  console.log(`Tab: ${tabId}, Sync Key: ${syncKey}`, id);
6
});