Tabs

The Tabs component provides a tab navigation interface for organizing content into separate panels. It implements the WAI-ARIA tabs pattern for full accessibility support.

Installation

npm install @duskmoon-dev/el-tabs

Usage

import '@duskmoon-dev/el-tabs/register';
<el-dm-tabs value="tab1">
  <el-dm-tab tab-id="tab1">Tab 1</el-dm-tab>
  <el-dm-tab tab-id="tab2">Tab 2</el-dm-tab>
  <el-dm-tab tab-id="tab3">Tab 3</el-dm-tab>

  <el-dm-tab-panel panel-for="tab1">Content for Tab 1</el-dm-tab-panel>
  <el-dm-tab-panel panel-for="tab2">Content for Tab 2</el-dm-tab-panel>
  <el-dm-tab-panel panel-for="tab3">Content for Tab 3</el-dm-tab-panel>
</el-dm-tabs>

Live Demo

Tabs Demo

OverviewFeaturesSpecifications

Product Overview

This is the overview content for the product. It provides a general introduction and summary.

Key Features

  • Feature one with description
  • Feature two with description
  • Feature three with description

Technical Specifications

Detailed technical specifications and requirements go here.

Properties

Tabs Container (el-dm-tabs)

PropertyTypeDefaultDescription
valuestring-Currently selected tab id
variant'underline' | 'pills' | 'enclosed''underline'Tab style variant
colorstring-Color theme for tabs
orientation'horizontal' | 'vertical''horizontal'Tab orientation

Tab (el-dm-tab)

PropertyTypeDefaultDescription
tab-idstring-Unique identifier for this tab
disabledbooleanfalseWhether the tab is disabled

Tab Panel (el-dm-tab-panel)

PropertyTypeDefaultDescription
panel-forstring-ID of the tab this panel belongs to

Variants

Underline (default)

<el-dm-tabs variant="underline">
  <!-- tabs and panels -->
</el-dm-tabs>

Pills

<el-dm-tabs variant="pills">
  <!-- tabs and panels -->
</el-dm-tabs>

Enclosed

<el-dm-tabs variant="enclosed">
  <!-- tabs and panels -->
</el-dm-tabs>

Orientations

Horizontal (default)

<el-dm-tabs orientation="horizontal">
  <!-- tabs and panels -->
</el-dm-tabs>

Vertical

<el-dm-tabs orientation="vertical">
  <!-- tabs and panels -->
</el-dm-tabs>

Disabled Tabs

Individual tabs can be disabled:

<el-dm-tabs value="tab1">
  <el-dm-tab tab-id="tab1">Active Tab</el-dm-tab>
  <el-dm-tab tab-id="tab2" disabled>Disabled Tab</el-dm-tab>
  <el-dm-tab tab-id="tab3">Another Tab</el-dm-tab>

  <el-dm-tab-panel panel-for="tab1">Content 1</el-dm-tab-panel>
  <el-dm-tab-panel panel-for="tab2">Content 2</el-dm-tab-panel>
  <el-dm-tab-panel panel-for="tab3">Content 3</el-dm-tab-panel>
</el-dm-tabs>

Events

EventDetailDescription
change{ value: string, oldValue: string }Fired when tab selection changes

Event Handling

const tabs = document.querySelector('el-dm-tabs');
tabs.addEventListener('change', (e) => {
  console.log('Tab changed from', e.detail.oldValue, 'to', e.detail.value);
});

Slots

Tabs Container

SlotDescription
tabSlot for tab elements (auto-assigned)
defaultDefault slot for tab panels

Tab

SlotDescription
defaultTab label content

Tab Panel

SlotDescription
defaultPanel content

CSS Parts

Tabs Container

PartDescription
tablistThe tab list container
indicatorThe animated indicator (underline variant)

Tab

PartDescription
tabThe tab button

Tab Panel

PartDescription
panelThe panel container

Styling with CSS Parts

el-dm-tabs::part(tablist) {
  background: #f5f5f5;
  padding: 0.5rem;
}

el-dm-tabs::part(indicator) {
  height: 3px;
  border-radius: 3px;
}

el-dm-tab::part(tab) {
  padding: 1rem 1.5rem;
}

el-dm-tab-panel::part(panel) {
  padding: 1.5rem;
}

Keyboard Navigation

KeyAction
ArrowLeftMove to previous tab (horizontal)
ArrowRightMove to next tab (horizontal)
ArrowUpMove to previous tab (vertical)
ArrowDownMove to next tab (vertical)
HomeMove to first tab
EndMove to last tab

Accessibility

  • Implements WAI-ARIA tabs pattern
  • Uses role="tablist", role="tab", and role="tabpanel"
  • aria-selected indicates the current tab
  • aria-orientation reflects the tab orientation
  • Proper focus management with tabindex
  • Keyboard navigation support for all orientations