Tabs Component

Axiom01's tabs component provides a way to organize and display content in a compact, navigable interface. It allows users to switch between different sections of content within the same context, improving user experience and reducing clutter.

Live Example

Content for Tab 1

This is the content for the first tab. It can contain any HTML elements, including text, images, forms, or other components.

HTML Structure

The tabs component consists of a container, a list of tab buttons, and corresponding tab panels.

<div class="tabs-container">
			<div class="tab-list" role="tablist" aria-label="Content Tabs">
					<button class="tab-button active" role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Tab 1</button>
					<button class="tab-button" role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Tab 2</button>
					<button class="tab-button" role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3">Tab 3</button>
			</div>
			<div class="tab-content">
					<div class="tab-panel active" role="tabpanel" id="panel-1" aria-labelledby="tab-1">
							<h3>Content for Tab 1</h3>
							<p>This is the content for the first tab.</p>
					</div>
					<div class="tab-panel" role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
							<h3>Content for Tab 2</h3>
							<p>This is the content for the second tab.</p>
					</div>
					<div class="tab-panel" role="tabpanel" id="panel-3" aria-labelledby="tab-3" hidden>
							<h3>Content for Tab 3</h3>
							<p>This is the content for the third tab.</p>
					</div>
			</div>
	</div>

Styling

The .tabs-container wraps the entire component. The .tab-list styles the row of tab buttons, and .tab-button styles individual tabs. The .tab-content holds the panels, with .tab-panel styling each content area.

.tab-list: Uses flexbox to arrange tab buttons horizontally.
.tab-button: Styled as a clickable button, with an .active state to highlight the currently selected tab.
.tab-panel: Content area for each tab. Inactive panels are hidden using the hidden attribute.

JavaScript Integration

You will need JavaScript to handle the interactivity of the tabs:

Listen for clicks on .tab-button elements.
When a tab is clicked, update the .active class on the clicked tab and its corresponding panel.
Toggle the aria-selected attribute on tab buttons and the hidden attribute on tab panels.

<script>
			document.addEventListener('DOMContentLoaded', () => {
					const tabList = document.querySelector('.tab-list');
					const tabButtons = tabList.querySelectorAll('.tab-button');
					const tabPanels = document.querySelectorAll('.tab-panel');

					tabList.addEventListener('click', (event) => {
							const clickedButton = event.target.closest('.tab-button');
							if (!clickedButton) return;

							// Deactivate current tab and panel
							tabButtons.forEach(button => button.classList.remove('active'));
							tabButtons.forEach(button => button.setAttribute('aria-selected', 'false'));
							tabPanels.forEach(panel => panel.classList.remove('active'));
							tabPanels.forEach(panel => panel.setAttribute('hidden', ''));

							// Activate new tab and panel
							clickedButton.classList.add('active');
							clickedButton.setAttribute('aria-selected', 'true');
							const targetPanelId = clickedButton.getAttribute('aria-controls');
							const targetPanel = document.getElementById(targetPanelId);
							if (targetPanel) {
									targetPanel.classList.add('active');
									targetPanel.removeAttribute('hidden');
							}
					});
			});
	</script>

Accessibility

The tabs component is designed with accessibility in mind:

role="tablist" on the container for tab buttons.
role="tab" on each tab button.
aria-selected="true|false" on tab buttons to indicate selection state.
aria-controls on tab buttons linking to their respective panels.
role="tabpanel" on each content panel.
aria-labelledby on tab panels linking back to their controlling tab button.
The hidden attribute is used on inactive panels to ensure they are not exposed to assistive technologies.
Keyboard navigation (arrow keys to switch tabs, Enter/Space to activate) should be implemented in JavaScript for full accessibility.

Customization

Customize the appearance using Axiom01's CSS variables for colors, spacing, and typography. You can adjust the tab button styles, active states, and panel backgrounds to match your theme.